tab欄切換製作 先上圖 要求1：預設狀態，第一個選項卡被選中，展示第一個選項卡的內容 策略：第一個選項卡預設有被選中的樣式，第一個選項卡對應的display: block，其他的dispaly設為none 要求2: 選項卡模塊：被點擊的變為紅底白字，其他的變為白底紅字 策略：排他思想，每次點擊一個 ...
tab欄切換製作
先上圖
要求1：預設狀態，第一個選項卡被選中，展示第一個選項卡的內容
策略：第一個選項卡預設有被選中的樣式，第一個選項卡對應的display: block，其他的dispaly設為none
要求2: 選項卡模塊：被點擊的變為紅底白字，其他的變為白底紅字
策略：排他思想，每次點擊一個選項卡時，先把其他選項卡設為預設樣式，然後自己設為被選中的樣式。這裡我們先在style裡面設置一個新的class,把這個樣式給被選中的選項卡。
要求3：每點擊某個選中卡，出現對應的模塊內容，點擊第一個li，展示第一個div,點擊第幾個li，展示第幾個div......，如何知道選中了第幾個li呢?
策略：利用for迴圈，給每個li設置一個自定義屬性，每點擊這個li，得到該liindex的屬性的值
代碼部分：
1 <body> 2 <div class="con"> 3 <div class="tab_list"> 4 <ul> 5 <!-- 第一個預設被選中 --> 6 <li class="tabChange">商品介紹</li> 7 <li>規格與包裝</li> 8 <li>售後保障</li> 9 <li>商品評價</li> 10 </ul> 11 </div> 12 <div class="tab_containt"> 13 <div style="display: block">商品介紹模塊</div> 14 <div>規格與包裝模塊</div> 15 <div>售後保障模塊</div> 16 <div>商品評價模塊</div> 17 </div> 18 </div>
樣式：
1 <style> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 .con { 8 width: 70%; 9 margin: 50px auto; 10 } 11 12 .tab_list { 13 border-bottom: 1px solid red; 14 height: 60px; 15 } 16 17 .tab_list ul {} 18 19 .tab_list ul li { 20 list-style: none; 21 margin-right: 10px; 22 width: 23%; 23 height: 60px; 24 line-height: 60px; 25 color: red; 26 float: left; 27 text-align: center; 28 cursor: pointer; 29 } 30 31 .tab_containt div { 32 display: none; 33 } 34 35 .tab_list ul .tabChange { 36 color: aliceblue; 37 background-color: red; 38 }
js部分：
1 <script> 2 // 切換選項卡時選項卡模塊：被點擊的變為紅底白字，其他的變為白底紅字,所以要用到排他思想 3 var lis = document.querySelector(".tab_list").querySelectorAll("li"); 4 var items = document.querySelector(".tab_containt").querySelectorAll("div"); 5 //console.log(items); 6 7 //console.log(lis); 8 //給所有的li註冊點擊事件 9 for (var i = 0; i < lis.length; i++) { 10 // 點擊第一個li，展示第一個div,點擊第幾個li，展示第幾個div......this 11 // 那麼我們如何知道點擊了第幾個li呢？思路：給li設置一個自定義屬性，那麼如何給5個li都設置帶有編號的index呢，當然用for迴圈啦 12 lis[i].setAttribute("index", i); 13 lis[i].onclick = function() { 14 //console.log("dianij"); 15 //排他 16 for (var i = 0; i < lis.length; i++) { 17 lis[i].className = ""; 18 } 19 //成就自己 20 this.className = "tabChange"; 21 //得到選項卡的index屬性值 22 var index = this.getAttribute("index"); 23 //console.log(index); 24 25 //先排他思想，清除其他的內容顯示第index個div的內容 26 for (var i = 0; i < items.length; i++) { 27 items[i].style.display = "none"; 28 } 29 //使第index個盒子的內容顯示 30 items[index].style.display = "block"; 31 32 } 33 } 34 </script>
