tab欄切換製做

時間 2020-07-20

標籤 tab 切換製做简体版

原文原文鏈接

tab欄切換製做this

先上圖spa

要求1：默認狀態，第一個選項卡被選中，展現第一個選項卡的內容code

策略：第一個選項卡默認有被選中的樣式，第一個選項卡對應的display: block，其餘的dispaly設爲noneblog

要求2: 選項卡模塊：被點擊的變爲紅底白字，其餘的變爲白底紅字事件

策略：排他思想，每次點擊一個選項卡時，先把其餘選項卡設爲默認樣式，而後本身設爲被選中的樣式。這裏咱們先在style裏面設置一個新的class,把這個樣式給被選中的選項卡。ip

要求3：每點擊某個選中卡，出現對應的模塊內容，點擊第一個li，展現第一個div,點擊第幾個li，展現第幾個div......，如何知道選中了第幾個li呢?get

策略：利用for循環，給每一個li設置一個自定義屬性，每點擊這個li，獲得該liindex的屬性的值it

代碼部分：io

 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>

樣式：console

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。