要求：當鼠標點擊上面相應的選項卡（tab），下面頁面的內容也隨之而改變。
結構分析：
全部的內容都放到一個大的盒子里面，盒子里面又可以分為上面和下面兩個盒子。
上面的盒子放了 5個li，裝着5個小的選項卡，默認會有一個被選中；
下面的盒子也包含了 5個 div 模塊，模塊內容與上面的選項一一對應，當前默認的只有第一個 div會被顯示出來。
實現思路：
點擊切換選項卡部分
Tab 欄切換有2個大的 模塊
1、上面模塊的選項卡，點擊某一個，改變當前樣式，底色變為紅色，字體顏色變為白色。而其他的選項卡樣式不發生改變（排他思想）
通過修改類名的方式實現。
2、下面模塊的內容，會隨着上面的選項卡變化。所以下面模塊變化寫到點擊事件里面。
規律：下面的模塊顯示的內容和上面選項卡一一對應，相匹配。
核心思路：給上面模塊里面所有的 li 添加自定義屬性，屬性值從 0 開始作為索引號。
排他思想：通過 for循環遍歷數組中的元素，進入循環之后首先消除所有部分的樣式，接着再為所點擊的當前部分添加樣式。
通過 setAttribute（name，value）創建自定義屬性，name指的是為元素設置的自定義屬性，value為自定義屬性添加的屬性值。
通過 getAttribute（name）獲取元素的屬性。name是屬性的名稱。
默認第一個選項卡對應的下面模塊是顯示的，需要在添加行內樣式（style='display:block'）因為CSS行內樣式的優先級高於外部樣式，會優先顯示。
而（items[index].style.display = 'block';）這一句也相當於創建了行內樣式。
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab欄切換</title>
<style> *{ margin:0; padding:0;
} .tab{ width:800px; height:45px; border:1px solid #ccc; border-bottom:1px solid #c81623; background: #fafafa; position:relative; margin:100px auto;
} .tab_list li{ width:160px; height:45px; list-style:none; line-height:45px; text-align: center; float:left;
} .tab_list .current{ background-color:#c81623; color:#fff;
} .item{ width:800px; height: 200px; padding-top:40px;
/*line-height:200px;*/ font-size: 30px; color:#fff; text-align: center; text-shadow:2px 2px 4px #000000; background: #efefef;
/*opacity: 0.8;*/ top:47px; position:absolute;
}
</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='tab_con'>
<div class="item one" style='display:block'>每日歌曲推薦</div>
<div class="item two">精品歌單傾心推薦，給最懂音樂的你</div>
<div class="item thr">上癮煙嗓情感之聲</div>
<div class="item fou">新歌飆升榜</div>
<div class="item fiv">歌手排行榜</div>
</div>
</div>
<!-- tab 欄切換有2個模塊 模塊的選項卡，點擊其中的某一個，被點擊的這一個底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!-- 下面顯示模塊內容，會隨着上面的選項卡變化，所以下面模塊變化寫到點擊事件里面。 規律：下面模塊顯示內容和上面的選項卡一一對應，相匹配。 -->
<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++){ lis[i].setAttribute('index',i); lis[i].onclick = function() { // for(var i=0;i < lis.length;i++){ lis[i].className = ''; } //留下現在需要用的
this.className = 'current'; //下面顯示內容模塊
var index = this.getAttribute('index'); console.log(index); //去掉其他的 item，讓這些隱藏起來
//只留下當前的 item，讓它顯示出來
for(var i=0;i<items.length;i++){ items[i].style.display='none'; } items[index].style.display = 'block'; } } </script>
</body>
</html>
實現效果：
點擊其它選項
