点击导航按钮切换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: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; ?}}js实现多标签页效果
原文地址：https://www.cnblogs.com/xiaoqi2018/p/10552919.html