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 />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
      </div>
      <div id="content2">
        30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
      </div>
      <div id="content3">
        50元包月详情：<br />&nbsp;每月无限量随心打
      </div>
    </div>
  </div>

css代码：

*{
    margin:0;
    padding: 0;
}
#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: 0;
}
#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;
  }
}

原文地址：https://www.cnblogs.com/xiaoqi2018/p/10552919.html