JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例

更新時(shí)間：2022年03月07日 10:49:52 作者：Cloud%

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換的具體代碼，供大家參考，具體內(nèi)容如下

要求：當(dāng)鼠標(biāo)點(diǎn)擊上面相應(yīng)的選項(xiàng)卡（tab），下面頁(yè)面的內(nèi)容也隨之而改變。

結(jié)構(gòu)分析：

全部的內(nèi)容都放到一個(gè)大的盒子里面，盒子里面又可以分為上面和下面兩個(gè)盒子。

上面的盒子放了 5個(gè)li，裝著5個(gè)小的選項(xiàng)卡，默認(rèn)會(huì)有一個(gè)被選中；

下面的盒子也包含了 5個(gè) div 模塊，模塊內(nèi)容與上面的選項(xiàng)一一對(duì)應(yīng)，當(dāng)前默認(rèn)的只有第一個(gè) div會(huì)被顯示出來(lái)。

實(shí)現(xiàn)思路：

點(diǎn)擊切換選項(xiàng)卡部分

Tab 欄切換有2個(gè)大的模塊

1、上面模塊的選項(xiàng)卡，點(diǎn)擊某一個(gè)，改變當(dāng)前樣式，底色變?yōu)榧t色，字體顏色變?yōu)榘咨６渌倪x項(xiàng)卡樣式不發(fā)生改變（排他思想）

通過(guò)修改類名的方式實(shí)現(xiàn)。

2、下面模塊的內(nèi)容，會(huì)隨著上面的選項(xiàng)卡變化。所以下面模塊變化寫(xiě)到點(diǎn)擊事件里面。

規(guī)律：下面的模塊顯示的內(nèi)容和上面選項(xiàng)卡一一對(duì)應(yīng)，相匹配。

核心思路：給上面模塊里面所有的 li 添加自定義屬性，屬性值從 0 開(kāi)始作為索引號(hào)。

排他思想：通過(guò) for循環(huán)遍歷數(shù)組中的元素，進(jìn)入循環(huán)之后首先消除所有部分的樣式，接著再為所點(diǎn)擊的當(dāng)前部分添加樣式。

通過(guò) setAttribute（name，value）創(chuàng)建自定義屬性，name指的是為元素設(shè)置的自定義屬性，value為自定義屬性添加的屬性值。

通過(guò) getAttribute（name）獲取元素的屬性。name是屬性的名稱。

默認(rèn)第一個(gè)選項(xiàng)卡對(duì)應(yīng)的下面模塊是顯示的，需要在添加行內(nèi)樣式（style='display:block'）因?yàn)镃SS行內(nèi)樣式的優(yōu)先級(jí)高于外部樣式，會(huì)優(yōu)先顯示。

而（items[index].style.display = 'block';）這一句也相當(dāng)于創(chuàng)建了行內(nèi)樣式。

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Tab欄切換</title>
? ? <style>
? ? *{
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? }
? ? .tab{
? ? ? ? width:800px;
? ? ? ? height:45px;
? ? ? ? border:1px solid #ccc;
? ? ? ? border-bottom:1px solid #c81623;
? ? ? ? background: #fafafa;
? ? ? ? position:relative;
? ? ? ? margin:100px auto;
? ? }
? ? .tab_list li{
? ? ? ? width:160px;
? ? ? ? height:45px;
? ? ? ? list-style:none;
? ? ? ? line-height:45px;
? ? ? ? text-align: center;
? ? ? ? float:left;
? ? }
? ? .tab_list .current{
? ? ? ? background-color:#c81623;
? ? ? ? color:#fff;
? ? }
? ? .item{
? ? ? ? width:800px;
? ? ? ? height: 200px;
? ? ? ? padding-top:40px;?
? ? ? ? /*line-height:200px;*/
? ? ? ? font-size: 30px;
? ? ? ? color:#fff;
? ? ? ? text-align: center;
? ? ? ? text-shadow:2px 2px 4px #000000;
? ? ? ? background: #efefef;
? ? ? ? /*opacity: 0.8;*/
? ? ? ? top:47px;
? ? ? ? position:absolute;
? ? }
? ? </style>
</head>
<body>
<div class='tab'>
? ? ? ? <div class='tab_list'>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li class='current'>個(gè)性推薦</li>
? ? ? ? ? ? ? ? <li>歌單</li>
? ? ? ? ? ? ? ? <li>主播電臺(tái)</li>
? ? ? ? ? ? ? ? <li>排行榜</li>
? ? ? ? ? ? ? ? <li>歌手</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? <div class='tab_con'>
? ? ? ? <div class="item one" style='display:block'>每日歌曲推薦</div>
? ? ? ? <div class="item two">精品歌單傾心推薦，給最懂音樂(lè)的你</div>
? ? ? ? <div class="item thr">上癮煙嗓情感之聲</div>
? ? ? ? <div class="item fou">新歌飆升榜</div>
? ? ? ? <div class="item fiv">歌手排行榜</div>
? ? </div>
</div>
<!-- ?tab 欄切換有2個(gè)模塊
?模塊的選項(xiàng)卡，點(diǎn)擊其中的某一個(gè)，被點(diǎn)擊的這一個(gè)底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!-- ?下面顯示模塊內(nèi)容，會(huì)隨著上面的選項(xiàng)卡變化，所以下面模塊變化寫(xiě)到點(diǎn)擊事件里面。
?規(guī)律：下面模塊顯示內(nèi)容和上面的選項(xiàng)卡一一對(duì)應(yīng)，相匹配。
? -->

?<script>
? ? ?var tab_list = document.querySelector('.tab_list');
? ? ?var lis = tab_list.querySelectorAll('li');
? ? ?var items = document.querySelectorAll('.item');
? ? ?//for 循環(huán)綁定點(diǎn)擊事件
? ? ?for(var i=0;i < lis.length;i++){
? ? ? ? ?lis[i].setAttribute('index',i);
? ? ? ? lis[i].onclick = function() {
? ? ? ? ? ? //
? ? ? ? ? ? ?for(var i=0;i < lis.length;i++){
? ? ? ? ? ? ? ? ?lis[i].className = '';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?//留下現(xiàn)在需要用的
? ? ? ? ? ? ?this.className = 'current';
? ? ? ? ? ? ?//下面顯示內(nèi)容模塊
? ? ? ? ? ? ?var index = this.getAttribute('index');
? ? ? ? ? ? ?console.log(index);
? ? ? ? ? ? ?//去掉其他的 item，讓這些隱藏起來(lái)
? ? ? ? ? ? ?//只留下當(dāng)前的 item，讓它顯示出來(lái)
? ? ? ? ? ? ?for(var i=0;i<items.length;i++){
? ? ? ? ? ? ? ? ?items[i].style.display='none';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?items[index].style.display = 'block';
? ? ? ? ?}
? ? ?}
?</script>
</body>
</html>

實(shí)現(xiàn)效果：