溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS如何實現(xiàn)簡單Tab欄切換

發(fā)布時間：2022-03-07 11:55:20 來源：億速云 閱讀：217 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“JS如何實現(xiàn)簡單Tab欄切換”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何實現(xiàn)簡單Tab欄切換”這篇文章吧。

具體內(nèi)容如下

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

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

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

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

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

實現(xiàn)思路：

點擊切換選項卡部分

JS如何實現(xiàn)簡單Tab欄切換

Tab 欄切換有2個大的 模塊

1、上面模塊的選項卡，點擊某一個，改變當(dāng)前樣式，底色變?yōu)榧t色，字體顏色變?yōu)榘咨?。而其他的選項卡樣式不發(fā)生改變（排他思想）

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

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

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

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

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

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

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

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

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

實現(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'>個性推薦</li>
                <li>歌單</li>
                <li>主播電臺</li>
                <li>排行榜</li>
                <li>歌手</li>
            </ul>
        </div>
    <div class='tab_con'>
        <div class="item one" style='display:block'>每日歌曲推薦</div>
        <div class="item two">精品歌單傾心推薦，給最懂音樂的你</div>
        <div class="item thr">上癮煙嗓情感之聲</div>
        <div class="item fou">新歌飆升榜</div>
        <div class="item fiv">歌手排行榜</div>
    </div>
</div>
<!--  tab 欄切換有2個模塊
 模塊的選項卡，點擊其中的某一個，被點擊的這一個底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!--  下面顯示模塊內(nèi)容，會隨著上面的選項卡變化，所以下面模塊變化寫到點擊事件里面。
 規(guī)律：下面模塊顯示內(nèi)容和上面的選項卡一一對應(yīng)，相匹配。
  -->

 <script>
     var tab_list = document.querySelector('.tab_list');
     var lis = tab_list.querySelectorAll('li');
     var items = document.querySelectorAll('.item');
     //for 循環(huá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，讓這些隱藏起來
             //只留下當(dāng)前的 item，讓它顯示出來
             for(var i=0;i<items.length;i++){
                 items[i].style.display='none';
             }
             items[index].style.display = 'block';
         }
     }
 </script>
</body>
</html>

實現(xiàn)效果：

JS如何實現(xiàn)簡單Tab欄切換

點擊其它選項

JS如何實現(xiàn)簡單Tab欄切換

以上是“JS如何實現(xiàn)簡單Tab欄切換”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手