實現
實現如圖所示的Tab欄切換，點擊對應的 tab 出現對應的內容，同時該點擊的 tab 背景顏色為紅：
分析
- 首先建立一個大的 div 里面包含兩個盒子
- 第一個盒子里面放 tab 欄
- 第二個盒子里面放相應的內容
<div class="tab"> <!-- tab欄--> <div class="tab_list"> <ul> <li class="current">每日推薦</li> <li>歌單</li> <li>主播電台</li> <li>排行榜</li> <li>歌手</li> </ul> </div> <!-- tab欄內容--> <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>
JS思想實現
利用排他思想：通過 for循環遍歷存放 li 數組中的元素，進入循環之后首先消除所有部分的樣式，接着再為當前所點擊的 li 添加樣式。
代碼如下：
<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; font-size: 15px; text-align: center; float:left; } .tab_list .current{ background-color:#c81623; color:#fff; } .item{ position:absolute; top:47px; width:800px; height: 200px; padding-top:40px; font-size: 25px; color:#fff; text-align: center; text-shadow:2px 2px 4px #000000; background: #efefef; display: none; /*這里注意*/ } </style> </head> <body> <div class="tab"> <!-- tab欄--> <div class="tab_list"> <ul> <li class="current">每日推薦</li> <li>歌單</li> <li>主播電台</li> <li>排行榜</li> <li>歌手</li> </ul> </div> <!-- tab欄內容--> <div class="tab_con"> <!-- 默認第一個tab下的內容顯示--> <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(let i=0;i < lis.length;i++){ // setAttribute() 方法添加指定的屬性，並為其賦指定的值。 lis[i].setAttribute('index',i); //此點擊事件是一個回調函數 lis[i].onclick = function () { //把所有li的類選擇器置空 for(var i=0;i < lis.length;i++){ lis[i].className = ''; } //給當前點擊的li添加樣式.current this.className = 'current'; //下面顯示內容模塊 var index = this.getAttribute('index'); console.log(i); //去掉其他的 item，讓這些隱藏起來 //只留下當前的 item，讓它顯示出來 for(var i=0;i<items.length;i++){ items[i].style.display = 'none'; } items[index].style.display = 'block'; } } </script> </body>