<style> .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; list-style: none; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; }
.tab{
background:gray;
} </style>
style只做最基礎的樣式。讓頁面正常顯示即可，我們的目標是完成js部分代碼
頁面布局如下：
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="clear" style="clear: both;"></div> 12 <div class="tab_con"> 13 <div class="item" style="display: block;"> 14 商品介紹模塊內容 15 </div> 16 <div class="item"> 17 規格和包裝內容 18 </div> 19 <div class="item"> 20 售后保障內容 21 </div> 22 <div class="item"> 23 商品評價內容 24 </div> 25 <div class="item"> 26 手機社區內容 27 </div> 28 29 30 </div> 31 </div>
網頁效果運行：
目標功能要求：點擊不同的選項卡，有當前選項卡的選中效果
選項卡下方顯示相對應的內容，例如點擊了 ‘ 售后保障 ’
選項卡下方顯示跟 ‘售后保障’ 有關的內容
實現思路：
分為兩大模塊實現，先實現選項卡上方選中效果
在本案例中，我們是通過選中的選項添加 .current 這個類實現的
1 // 獲取元素.拿到父親 2 var tab_list = document.querySelector('.tab_list'); 3 // 通過父親拿到孩子 4 var lis = tab_list.querySelectorAll('li');
然后for循環綁定點擊事件，這里用到 排他思想：清除所有人的類，然后只留下自己
for (var i = 0; i < lis.length; i++) { lis[i].onclick = function () { // 干掉所有人，其余的li清除class這個類 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } // 留下自己 this.className = 'current'; }
到這里，第一部分已經完成
第二部分：獲取點擊元素的索引（通過自定義屬性setAttribute實現）
語法如下：
setAttribute(name, value)
這里寫在for循環里面
lis[i].setAttribute('index', i);
然后可以將值賦值給一個index變量
// 得到點擊的li的自定義索引 var index = this.getAttribute('index');
最后將相對應的元素的display設置為block即可（或者添加一個類，這個類是用來控制元素的顯示隱藏的）
items[index].style.display = 'block';
最后，貼出本案例的所有代碼，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
list-style: none;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
.tab {
background-color: gray;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格和包裝</li>
<li>售后保障</li>
<li>商品評價</li>
<li>手機社區</li>
</ul>
</div>
<div class="clear" style="clear: both;"></div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介紹模塊內容
</div>
<div class="item">
規格和包裝內容
</div>
<div class="item">
售后保障內容
</div>
<div class="item">
商品評價內容
</div>
<div class="item">
手機社區內容
</div>
</div>
</div>
<script>
// 解題思路：上面的模塊選項卡，點擊某一個底色會變成紅色，其余不變（排他思想）修改類
// 獲取元素.拿到父親
var tab_list = document.querySelector('.tab_list');
// 通過父親拿到孩子
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循環綁定點擊事件
for (var i = 0; i < lis.length; i++) {
// 開始給5個小li設置索引號
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
// 干掉所有人，其余的li清除class這個類
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下自己
this.className = 'current';
// 得到點擊的li的自定義索引
var index = this.getAttribute('index');
console.log(index);
// 這里是第二次干掉所有人，讓其他盒子內容隱藏，只留下自己（排他思想）
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
// 第二個下面的顯示內容模塊，要寫在點擊事件里面
// 給上面的tab_list里面的所有小li添加自定義屬性，屬性值從0開始編寫
// 最后一步，點擊tab_list里面的某個小li,讓tab_con里面對應序號的內容顯示，其余隱藏（排他思想）
}
</script>
</body>
</html>