HTML代码:
1 <div class="tab"> 2 <div class="tab_list"> 3 <ul> 4 <li class="current">商品介绍</li> 5 <li>规格与包装</li> 6 <li>售后保障</li> 7 <li>商品评价</li> 8 <li>手机社区</li> 9 </ul> 10 </div> 11 <div class="tab_con"> 12 <div class="item" style="display: block;"> 13 商品介绍 14 </div> 15 <div class="item"> 16 规格与包装 17 </div> 18 <div class="item"> 19 售后保障 20 </div> 21 <div class="item"> 22 商品评价 23 </div> 24 <div class="item"> 25 手机社区 26 </div> 27 </div> 28 </div>
js代码:
1 var tab_list = document.querySelector(".tab_list") 2 var lis = document.querySelectorAll("li") 3 var items = document.querySelectorAll(".item") 4 for (var i = 0; i < lis.length; i++) { 5 // 给五个标题内容设置索引号 6 lis[i].setAttribute("index", i) 7 lis[i].onclick = function () { 8 for (var j = 0; j < lis.length; j++) { 9 lis[j].className = ''; 10 } 11 // 留下对应的li 12 this.className = 'current' 13 // 下面的显示内容模块 14 var index = this.getAttribute("index") 15 // 清除所有item 让所有item隐藏 16 for (var i = 0; i < items.length; i++) { 17 items[i].style.display = 'none' 18 } 19 // 留下对应的item让他显示出来 20 items[index].style.display = 'block' 21 22 } 23 }
css代码:
1 .tab { 2 width: 1000px; 3 height: auto; 4 margin: 0 auto; 5 } 6 7 .tab_list { 8 height: 60px; 9 background-color: #efefef; 10 } 11 12 .tab_list ul { 13 list-style: none; 14 padding: 0; 15 } 16 17 .tab_list ul li { 18 float: left; 19 width: 20%; 20 line-height: 60px; 21 text-align: center; 22 cursor: pointer; 23 } 24 25 .current { 26 background-color: #c81623; 27 color: #fff; 28 } 29 30 .item { 31 display: none; 32 width: 100%; 33 height: 200px; 34 font-size: 20px; 35 background-color: rgb(192, 228, 192); 36 }