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 }
