正文
js实现多标签页效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
点击导航按钮切换div的内容
html代码：
<div class="tabs">
<ul id="tab">
<li><a href="#" data-id="#content1" data-toggle="tab">10元套餐</a></li>
<li><a href="#" data-id="#content2" data-toggle="tab">30元套餐</a></li>
<li><a href="#" data-id="#content3" data-toggle="tab">50元包月</a></li>
</ul>
<div id="container">
<div id="content1">
10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2">
30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3">
50元包月详情：<br /> 每月无限量随心打
</div>
</div>
</div>
css代码：
*{
margin:;
padding:;
}
#tab li{
float: left; list-style: none;
}
#tab li a{
display:inline-block;
text-decoration:none;
width: 80px; height: 40px;
line-height: 40px;
text-align: center;
color:#000;
}
#container{
position: relative;
}
#content1,#content2,#content3{
width: 300px;
height: 100px;
padding:30px;
position: absolute;
top: 40px;
left:;
}
#tab li:first-child,#content1{
background-color: #ffcc00;
}
#tab li:first-child+li,#content2{
background-color: #ff00cc;
}
#tab li:first-child+li+li,#content3{
background-color: #00ccff;
}
js代码：
//1. 查找触发事件的元素
var as=document.querySelectorAll(
"#tab>li>[data-toggle=tab]"
);
console.log(as);
//2. 绑定事件处理函数
for(var a of as){
a.onclick=function(){
var a=this;
//3. 查找要修改的元素
var id=a.getAttribute("data-id");//#content1
//a.dataset.id;
var div=document.querySelector(id)
var divs=
document.querySelectorAll("#container>div");
//4. 修改元素
for(var d of divs){
d.style.zIndex="";
}
div.style.zIndex=10;
}
}
