js + css 實現標籤內容切換功能

時間 2019-11-10

原文原文鏈接

先附上效果圖和代碼：

html 文檔：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="../js/tabs_function.js"></script>
 7     <script type="text/javascript">
 8         window.onload = function main() {
 9             Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");
10 
11         }
12     </script>
13     <style type="text/css">
14         #list-title {
15             width: 318px;
16             height: 56px;
17             margin: 0;
18             list-style-type: none;
19             padding-left: 0;
20         }
21 
22         .list-item {
23             float: left;
24             width: 100px;
25             height: 50px;
26             margin: 2px;
27             line-height: 50px;
28             font-size: 28px;
29             text-align: center;
30             border: 1px solid #000;
31             cursor: pointer;
32         }
33 
34         .list-item-checked {
35             background-color: #70adff;
36             color: #ffffff;
37         }
38 
39         #content-box {
40             position: relative;
41             clear: both;
42             width: 314px;
43             height: 302px;
44             margin: 0 2px;
45         }
46 
47         .contents {
48             position: absolute;
49             left: 0;
50             top: 0;
51             width: 312px;
52             height: 300px;
53             margin: 0;
54             font-size: 32px;
55             line-height: 300px;
56             text-align: center;
57             border: 1px solid #000;
58             z-index: 0;
59             opacity: 0;
60             visibility: hidden;
61             -webkit-transition: all .5s;
62             -moz-transition: all .5s;
63             -ms-transition: all .5s;
64             -o-transition: all .5s;
65             transition: all .5s;
66         }
67 
68         .contents-checked {
69             z-index: 1;
70             opacity: 1;
71             visibility: visible;
72         }
73     </style>
74 </head>
75 <body>
76 <ul id="list-title">
77     <li class="list-item list-item-checked">1</li>
78     <li class="list-item">2</li>
79     <li class="list-item">3</li>
80 </ul>
81 <div id="content-box">
82     <div class="contents contents-checked" style="background-color: #c8ff40;">content_1</div>
83     <div class="contents" style="background-color: #41ff6f;">content_2</div>
84     <div class="contents" style="background-color: #ff82a0;">content_3</div>
85 </div>
86 </body>
87 </html>

js 文件：

 1 /**
 2  * Created by Administrator on 2016/9/12.
 3  */
 4 
 5 /*
 6  * tabs_name:用於觸發事件的標籤的類名；
 7  * contents_name:內容容器的類名；
 8  * tabs_checked_style:標籤爲選中狀態時的樣式；
 9  * contents_checked_style:內容容器爲選中狀態時的樣式；
10  *
11  * classList.toggle();
12  * 檢查元素的類名列表中是否有指定的類名，若是有則移除，若是沒有則添加；
13  * */
14 function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
15     var tabs = document.querySelectorAll(tabs_name),
16         contents = document.querySelectorAll(contents_name),
17         e_mark = 0;
18     for (var i = 0, len = tabs.length; i < len; i++) {
19         tabs[i].num = i;
20         tabs[i].onclick = function () {
21             tabs[e_mark].classList.toggle(tabs_checked_style);
22             tabs[this.num].classList.toggle(tabs_checked_style);
23             contents[e_mark].classList.toggle(contents_checked_style);
24             contents[this.num].classList.toggle(contents_checked_style);
25             e_mark = this.num;
26         };
27     }
28 }

原理機制

關於css中，類的疊加效果。javascript

　　咱們知道，一個元素能夠添加多個類名，同時會被多個類的樣式層疊起來顯示。css

　　例如：html

 1         .list-item {
 2             float: left;
 3             width: 100px;
 4             height: 50px;
 5             margin: 2px;
 6             line-height: 50px;
 7             font-size: 28px;
 8             text-align: center;
 9             border: 1px solid #000;
10             cursor: pointer;
11         }
12 
13         .list-item-checked {
14             background-color: #70adff;
15             color: #ffffff;
16         }

　　能夠看到，第一個li的class屬性中，有兩個類名：.list-item 和 .list-item-checked。那麼這個li元素就會同時擁有這個兩個類的樣式。java

　　相比較，第二個和第三個li的class只有：.list-item。所以他們不會擁有 .list-item-checked 所設置的樣式。web

回到主題，標籤切換，實際就是獲取到元素，而後修改元素的樣式。那麼其中的元素樣式就能夠經過「classList」來控制元素的類名，從而修改樣式。數組

簡單介紹 classList 方法。

1. element.classList 只是獲取到元素的類名列表。函數

2. element.clasList.add(value); 該方法是向元素的類名列表中添加指定的類名this

3. element.classList.remove(value); 該方法是從元素的類名列表中刪除指定的類名spa

4. element.classList.contains(value); 該方法是判斷元素的類名列表中是否存在指定的類名；該方法會返回一個布爾值code

5. element.classList.toggle(value); 該方法是判斷元素的類名列表中是否存在指定的類名，若是存在，則刪除該類名；若是不存在，則添加該類名

其中，「value」的值能夠爲一個變量或者字符串常量；

1 element.classList.add("class-name"); // 字符串
2 element.classList.add(class_name);  // 變量
3 
4 element.classList.remove(class_name);
5 element.classList.contains(class_name); // true,false
6 element.classList.toggle(class_name); // 有則刪，無則添；

js 部分

 1         e_mark = 0;
 2     for (var i = 0, len = tabs.length; i < len; i++) {
 3         tabs[i].num = i;
 4         tabs[i].onclick = function () {
 5             tabs[e_mark].classList.toggle(tabs_checked_style);
 6             tabs[this.num].classList.toggle(tabs_checked_style);
 7             contents[e_mark].classList.toggle(contents_checked_style);
 8             contents[this.num].classList.toggle(contents_checked_style);
 9             e_mark = this.num;
10         };
11     }

1. 「e_mark」的做用：

1         e_mark = 0;

　　初始的「e_mark」的值爲「0」。表示「e_mark」指向的是當前被選中的元素爲編號是「0」的那個元素。

2. 「tabs[i].num=i」的做用：

1         tabs[i].num = i;

　　在上層的for循環中，「i」的值其實就是「tabs」數組中各個元素的下標值。因爲「onclick」等事件的匿名函數中沒法直接獲取到「i」的值。也就是說，當元素被點擊時，觸發的函數沒法得知是「tabs」數組中的第幾個元素被點擊了，由於每個元素均可能觸發這個函數。可是，函數能夠經過「this」來得知是哪個元素被點擊了，至於這個被點擊的元素是第幾個，能夠經過這個被點擊的元素的一個自定義值來獲取。

　　咱們在元素被點擊以前，先給這些元素綁定一個編號：num（自定義值），那麼就能夠經過「this.num」來獲取到這個元素的編號。也就知道這個元素是「tabs」數組中的第幾個元素了。

3. 修改當前元素和更新元素的樣式：

1             tabs[e_mark].classList.toggle(tabs_checked_style);
2             tabs[this.num].classList.toggle(tabs_checked_style);

　　上面說到，「e_mark」爲當前元素的編號，而「this.num」爲被點擊及新選中的元素的編號。

　　那麼當元素被點擊時，須要作兩件事：1.把當前被選中的元素的樣式還原到普通的樣式，2.將被點擊的元素的樣式修改成被選中時的樣式。

　　結合classList的方法，咱們知道：.list-item-checked 爲被選中時追加的樣式，選中的元素只需添加這個類名便可，而未被選中的元素則移除這個類名。

相關標籤/搜索

每日一句

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