先附上效果圖和代碼：
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中，類的疊加效果。
我們知道，一個元素可以添加多個類名，同時會被多個類的樣式層疊起來顯示。
例如：
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元素就會同時擁有這個兩個類的樣式。
相比較，第二個和第三個li的class只有：.list-item。因此他們不會擁有 .list-item-checked 所設置的樣式。
回到主題，標簽切換，實際就是獲取到元素，然后修改元素的樣式。那么其中的元素樣式就可以通過“classList”來控制元素的類名，從而修改樣式。
簡單介紹 classList 方法。
1. element.classList 只是獲取到元素的類名列表。
2. element.clasList.add(value); 該方法是向元素的類名列表中添加指定的類名
3. element.classList.remove(value); 該方法是從元素的類名列表中刪除指定的類名
4. element.classList.contains(value); 該方法是判斷元素的類名列表中是否存在指定的類名；該方法會返回一個布爾值
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 為被選中時追加的樣式，選中的元素只需添加這個類名即可，而未被選中的元素則移除這個類名。