本文主要跟大家分享js + css實作標籤內容切換功能(實例講解)。我們先附上效果圖，並用實例代碼教大家，希望能幫助大家。
先附上效果圖與程式碼：
## html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/tabs_function.js"></script>
<script type="text/javascript">
window.onload = function main() {
Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");
}
</script>
<style type="text/css">
#list-title {
width: 318px;
height: 56px;
margin: 0;
list-style-type: none;
padding-left: 0;
}
.list-item {
float: left;
width: 100px;
height: 50px;
margin: 2px;
line-height: 50px;
font-size: 28px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.list-item-checked {
background-color: #70adff;
color: #ffffff;
}
#content-box {
position: relative;
clear: both;
width: 314px;
height: 302px;
margin: 0 2px;
}
.contents {
position: absolute;
left: 0;
top: 0;
width: 312px;
height: 300px;
margin: 0;
font-size: 32px;
line-height: 300px;
text-align: center;
border: 1px solid #000;
z-index: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.contents-checked {
z-index: 1;
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<ul id="list-title">
<li class="list-item list-item-checked">1</li>
<li class="list-item">2</li>
<li class="list-item">3</li>
</ul>
<p id="content-box">
<p class="contents contents-checked" style="background-color: #c8ff40;">content_1</p>
<p class="contents" style="background-color: #41ff6f;">content_2</p>
<p class="contents" style="background-color: #ff82a0;">content_3</p>
</p>
</body>
</html>登入後複製
#js 檔案：
##
/**
* Created by Administrator on 2016/9/12.
*/
/*
* tabs_name:用于触发事件的标签的类名；
* contents_name:内容容器的类名；
* tabs_checked_style:标签为选中状态时的样式；
* contents_checked_style:内容容器为选中状态时的样式；
*
* classList.toggle();
* 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；
* */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
var tabs = document.querySelectorAll(tabs_name),
contents = document.querySelectorAll(contents_name),
e_mark = 0;
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].num = i;
tabs[i].onclick = function () {
tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
contents[e_mark].classList.toggle(contents_checked_style);
contents[this.num].classList.toggle(contents_checked_style);
e_mark = this.num;
};
}
}登入後複製
原理機制
關於css中，類別的疊加效果。
我們知道，一個元素可以加入多個類別名，同時會被多個類別的樣式層疊起來顯示。
例如：
#.list-item {
float: left;
width: 100px;
height: 50px;
margin: 2px;
line-height: 50px;
font-size: 28px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.list-item-checked {
background-color: #70adff;
color: #ffffff;
}登入後複製
比較，第二個和第三個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」的值可以為一個變數或字串常數；
## element.classList.add("class-name"); // 字符串
element.classList.add(class_name); // 变量
element.classList.remove(class_name);
element.classList.contains(class_name); // true,false
element.classList.toggle(class_name); // 有则删，无则添；登入後複製
e_mark = 0;
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].num = i;
tabs[i].onclick = function () {
tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
contents[e_mark].classList.toggle(contents_checked_style);
contents[this.num].classList.toggle(contents_checked_style);
e_mark = this.num;
};
}登入後複製
初始的「e_mark」 的值為「0」。表示「e_mark」指向的是目前被選取的元素為編號是「0」的那個元素。
2. “tabs[i].num=i” 的作用：
##
在上層的for迴圈中，「i」的值其實就是「tabs」數組中各個元素的下標值。由於「onclick」等事件的匿名函數中無法直接取得到「i」的值。也就是說，當元素被點擊時，觸發的函數無法得知是「tabs」數組中的第幾個元素被點擊了，因為每個元素都可能觸發這個函數。但是，函數可以透過「this」來得知是哪一個元素被點擊了，至於這個被點擊的元素是第幾個，可以透過這個被點擊的元素的一個自訂值來獲得。
我們在元素被點擊之前，先給這些元素綁定一個編號：num（自訂值），那麼就可以透過「this.num」來取得這個元素的編號。也就知道這個元素是「tabs」數組中的第幾個元素了。
3. 修改目前元素和更新元素的樣式：
tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
登入後複製
以上是js和css標籤內容切換功能的實作教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
