<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>

*{

    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;

}

//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;

  }

}