这里有两种方法可以实现多标签效果，一种是基于DOM，另一种是基于jquery。这一次，我为不同的电话套餐写了不同的标签

方法1:

首先，我们需要写出页面的大致框架和风格。html和css代码如下：

ul id=' tab ' Li id=' tab 1 ' onclick=' show(1)' 10元套餐/liliid=' tab 2 ' onclick=' show(2)' 30元套餐/liliid=' tab 3 ' onclick=' show(3)' 50元每月套餐/Li/ul div id 10元套餐详情：br/每月套餐拨打100分钟，超过每分钟2美分/divdiv id='content2'30元套餐详情：br/每月套餐拨打300分钟，超过每分钟1.5美分

* { margin:0padd : 0；} # tab li {左侧浮动：list-style:无；宽度： 80px；高度： 40px；线高： 40px；cursor:指针；文本对齐：中心；} #容器{ position: relative}#content1，#content2，# content3 { width: 300px高度： 100像素；padding:30px绝对位置：top: 40pxleft : 0；}#tab1，# content 1 { background-color : # ffcc 00；}#tab2，# content 2 { background-color : # ff 00cc；}#tab3，# content 3 { background-color : # 00 ccff；}形成的静态界面如下：

现在，开始编写javascript代码来实现动态效果。单击哪个选项卡，将显示相应的页面。代码如下：

script function show(n){ var curr=document . query selector(' div[style]')；curr . remove Attribute(' style ')；document . getelementbyid(' content ' n). style . zindex=' 1 '；}/}/脚本页面具有以下效果：

点击30元套餐，出现界面：

点击50元每月订阅，界面出现：

方法2:基于jquery，我们应该首先在html页面中引入jquery-1.11.3.js文件

Html代码(css样式代码与方法1相同):

ul id=' tab ' Li id=' tab 1 ' value=' 1 ' 10元套餐/丽丽id='tab2' value='2'30元套餐/丽丽id='tab3' value='3'50元每月套餐/Li/ul div id=' container ' div id=' content 1 ' style 10元套餐详情：br/每月套餐拨打100分钟，超过每分钟2美分/divdiv id='content2'30元套餐详情：br/每月套餐拨打300分钟，超过1。

脚本$('#tabli ')。单击(function(){ console . log(this))；$(“# content”$(this)。val())。attr('style '，' z-index:1 ')。兄弟姐妹(' div ')。remove attr(' style ')；});/script的最终效果与第一种方法相同

以上是基于边肖介绍的jQuery(web前端开发)切换多标签页的效果。希望对大家有帮助。如果你想离家近，请关注我们了解更多信息！