js + css實現(xiàn)標簽內容切換功能(實例講解)
先附上效果圖和代碼：
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>
<div id="content-box">
<div class="contents contents-checked" style="background-color: #c8ff40;">content_1</div>
<div class="contents" style="background-color: #41ff6f;">content_2</div>
<div class="contents" style="background-color: #ff82a0;">content_3</div>
</div>
</body>
</html>
js 文件：
/**
* Created by Administrator on 2016/9/12.
*/
/*
* tabs_name:用于觸發(fā)事件的標簽的類名；
* contents_name:內容容器的類名；
* tabs_checked_style:標簽為選中狀態(tài)時的樣式；
* contents_checked_style:內容容器為選中狀態(tài)時的樣式；
*
* 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。那么這個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”的值可以為一個變量或者字符串常量；
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); // 有則刪，無則添；
js 部分
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;
};
}
1. “e_mark” 的作用：
e_mark = 0;
初始的 “e_mark” 的值為“0”。表示“e_mark”指向的是當前被選中的元素為編號是“0”的那個元素。
2. “tabs[i].num=i” 的作用：
tabs[i].num = i;
在上層的for循環(huán)中，“i”的值其實就是“tabs”數(shù)組中各個元素的下標值。由于“onclick”等事件的匿名函數(shù)中無法直接獲取到“i”的值。也就是說，當元素被點擊時，觸發(fā)的函數(shù)無法得知是“tabs”數(shù)組中的第幾個元素被點擊了，因為每一個元素都可能觸發(fā)這個函數(shù)。但是，函數(shù)可以通過“this”來得知是哪一個元素被點擊了，至于這個被點擊的元素是第幾個，可以通過這個被點擊的元素的一個自定義值來獲取。
我們在元素被點擊之前，先給這些元素綁定一個編號：num（自定義值），那么就可以通過“this.num”來獲取到這個元素的編號。也就知道這個元素是“tabs”數(shù)組中的第幾個元素了。
3. 修改當前元素和更新元素的樣式：
tabs[e_mark].classList.toggle(tabs_checked_style); tabs[this.num].classList.toggle(tabs_checked_style);
上面說到，“e_mark” 為當前元素的編號，而“this.num”為被點擊及新選中的元素的編號。
那么當元素被點擊時，需要做兩件事：1.把當前被選中的元素的樣式還原到普通的樣式，2.將被點擊的元素的樣式修改為被選中時的樣式。
結合classList的方法，我們知道：.list-item-checked 為被選中時追加的樣式，選中的元素只需添加這個類名即可，而未被選中的元素則移除這個類名。
以上這篇js + css實現(xiàn)標簽內容切換功能(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹如何使用headjs來管理和異步加載js，提高頁面的加載速度，需要的朋友可以參考下2016-11-11
解析JSON字符串報錯syntaxError:unexpected?end?of?JsoN?input如何解決
這篇文章主要給大家介紹了關于解析JSON字符串報錯syntaxError:unexpected?end?of?JsoN?input如何解決的相關資料,文中通過代碼將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了JS實現(xiàn)身份證輸入框的輸入效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-08-08
javascript稀疏數(shù)組(sparse array)和密集數(shù)組用法分析
這篇文章主要介紹了javascript稀疏數(shù)組(sparse array)和密集數(shù)組用法,分析javascript稀疏數(shù)組和密集數(shù)組的功能、定義與使用方法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了javascript獲取select值的方法,結合完整實例形式分析了javascript動態(tài)遍歷與操作頁面元素相關實現(xiàn)技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JavaScript實現(xiàn)上下浮動的窗口效果代碼,可實現(xiàn)自定義窗口在垂直方向上彈性移動的效果,代碼備有完整的注釋說明供讀者參考學習,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了p5.js入門教程之鍵盤交互,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了微信小程序日期時分組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
以往我們只是習慣于通過數(shù)組下標來訪問正則匹配到的分組，但分組達到4、5個時，標識起來就會非常麻煩。V8早已實現(xiàn)了正則命名分組提案，只是我們很少使用，本文將介紹JS的正則命名分組2018-06-06
在寫表單的時候,總會遇到使用單選框或者復選框的時候,下面這篇文章主要給大家介紹了關于uniapp下單選框實現(xiàn)的相關資料,需要的朋友可以參考下2022-08-08