JavaScript實現(xiàn)tab欄切換的效果

更新時間：2021年09月30日 14:20:15 作者：qq_39111074

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

tab欄：點擊不同的標(biāo)簽，顯示不同的內(nèi)容，被點擊的標(biāo)簽樣式發(fā)生改變（突出選中的是哪一個）

實現(xiàn)思路：

1、將tab欄分為上下兩部分，上面是導(dǎo)航列表，下面是各部分對應(yīng)的內(nèi)容。把標(biāo)簽和內(nèi)容都寫出來，內(nèi)容按照標(biāo)簽順序依次順著寫，給標(biāo)簽都添加自定義屬性- - -index，屬性值從0開始，依次增加1

2、首先實現(xiàn)上面的效果，點擊后樣式切換，被點擊的字體顏色、背景顏色改變等:

①css定義一個類eg：current，里面定義改變后的樣式，先給第一個標(biāo)簽寫一個該類名，其他的不寫類名，
②js獲取所有標(biāo)簽元素對象，- - -for循環(huán)- - -遍歷給每個標(biāo)簽綁定- - -onclick點擊事件
③點擊事件里面使用排他算法- - -for循環(huán)- - -將所有標(biāo)簽設(shè)置類名為空- - -className = ‘' ，然后當(dāng)前被點擊的標(biāo)簽設(shè)置上面定義的特殊類名- - -this.className = ‘current';

3、實現(xiàn)下面，根據(jù)點擊的標(biāo)簽，出現(xiàn)不同的內(nèi)容：

①css將第一個標(biāo)簽對應(yīng)內(nèi)容顯示，其他的都隱藏起來：

.box-tb .item:nth-child(n+2) {
display: none;
}

②獲取內(nèi)容的全部元素對象，獲取標(biāo)簽的index值，在點擊事件里再添加一個排他思想代碼- - -for循環(huán)- - -遍歷內(nèi)容的元素對象，將所有內(nèi)容設(shè)置隱藏- - -items[i].style.display = ‘none';然后根據(jù)被點擊的標(biāo)簽，將對應(yīng)的內(nèi)容顯示- - -items[index].style.display = ‘block';

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab欄切換</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
        }
        
        .box-th {
            overflow: hidden;
            width: 100%;
            background-color: #88ace6;
        }
        
        .box-th ul li {
            float: left;
            width: 90px;
            height: 20px;
            margin-right: 10px;
            padding: 5px;
            text-align: center;
        }
        
        .current {
            color: #fff;
            background-color: green;
        }
        
        .box-tb {
            margin-top: 20px;
        }
        
        .box-tb .item:nth-child(n+2) {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-th">
            <ul>
                <li data-index="0" class="current">春</li>
                <li data-index="1">夏</li>
                <li data-index="2">秋</li>
                <li data-index="3">冬</li>
            </ul>
        </div>
        <div class="box-tb">
            <div class="item">春季排四季之首，新的輪回從此開啟。春，代表著溫暖、生長，植物發(fā)芽，風(fēng)和日暖，鳥語花香。這季節(jié)的氣溫、日照、降雨，處于一年中的轉(zhuǎn)折點，趨于上升或增多。春季，陰陽之氣開始轉(zhuǎn)變，萬物隨陽氣上升而萌牙生長，春季是萬物生長、春耕播種的季節(jié)，所謂“一年之計在于春”。 春季起始—結(jié)束： 依據(jù)天象變化劃分：傳統(tǒng)上是以“立春”（斗指寅，太陽達(dá)黃經(jīng)315°時）作為春季的起點，至“立夏”結(jié)束。 依據(jù)氣溫變化劃分：近代采用學(xué)者張寶堃的“候平均氣溫”劃分，以候平均溫度(連續(xù)5天氣溫的平均)從10℃以下穩(wěn)定升到10℃以上時作為春季開始，至候平均溫度22℃以上（入夏）時結(jié)束。
            </div>
            <div class="item">夏季萬物至此皆盛，是農(nóng)作物進(jìn)入旺季生長的一個季節(jié)。溫度升高，天氣炎熱，狂風(fēng)暴雨頻發(fā)，萬物盛長。夏季是風(fēng)暴最多的季節(jié)，常伴隨著大風(fēng)、暴雨。北半球夏季，大陸受熱氣壓上升形成低氣壓，海洋恒溫溫度相對較低形成高氣壓，根據(jù)環(huán)流，夏季吹的是東南風(fēng)。夏季北半球各地的白晝時間全年最長。 夏季起始—結(jié)束： 依據(jù)天象變化劃分：以“立夏”（斗指東南，太陽達(dá)黃經(jīng)45°）作為夏季的起點，至“立秋”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度穩(wěn)定升到22℃以上時作為夏季開始，至候平均溫度22℃以下時結(jié)束。
            </div>
            <div class="item">秋季是收獲季節(jié)，意味著萬物開始從繁茂成長趨向蕭索成熟。秋季的前兩個節(jié)氣立秋、處暑，還是酷熱天氣，因太陽所帶來的熱力未減弱，所謂“熱在三伏”，三伏天出現(xiàn)在小暑與處暑之間，是一年中氣溫最高且又潮濕、悶熱的日子。造成三伏天濕度高原因是，三伏天吹東南風(fēng)，而東南方是太平洋和印度洋，空氣潮濕，風(fēng)的潮濕造成了三伏天濕度大；到了深秋之后則相反，吹西北風(fēng)，而西北方是干燥的內(nèi)陸，干燥的西北風(fēng)造成深秋之后氣候干燥。秋季前兩個節(jié)氣的氣候特征為潮濕、悶熱，秋季真正涼爽一般要到白露節(jié)氣之后，自白露起漸漸趨向涼爽、干燥。隨著進(jìn)入深秋，氣候由熱轉(zhuǎn)涼，萬物隨寒氣增長，逐漸蕭落，這是熱與冷交替的季節(jié)。秋季最明顯的變化草木的葉子從繁茂的綠色到發(fā)黃，并開始落葉莊稼則開始成熟。
                [1] 秋季起始—結(jié)束： 依據(jù)天象變化劃分：以“立秋”（斗指西南，太陽達(dá)黃經(jīng)135°）作為秋季的起點，至“立冬”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度從22℃以上穩(wěn)定降到22℃以下作為秋季開始，至候平均溫度降到10℃以下時結(jié)束。
            </div>
            <div class="item">冬季，陰陽轉(zhuǎn)變，萬物由收到藏，植物生氣閉蓄。進(jìn)入立冬后意味著秋季少雨干燥氣候漸過去，轉(zhuǎn)為陰雨寒凍的冬季氣候特征。北半球的太陽高度小，白晝時間短。所謂“熱在三伏”，冷在三九”，冬至為"一九天"，冬至之前還不算很冷，冬至過后強冷空氣南下頻繁，并越過了南嶺，氣溫驟降，天氣寒冷。冬季真正寒冷，是在冬至后。 冬季起始—結(jié)束： 依據(jù)天象變化劃分：以“立冬”（斗指西北，太陽達(dá)黃經(jīng)225°）作為冬季的起點，至下一“立春”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度穩(wěn)定降到10℃以下為冬季的開始，至候平均溫度10℃以上時結(jié)束。
            </div>
        </div>
    </div>

    <script>
        var list = document.querySelector('.box-th').querySelectorAll('li');
        var items = document.querySelector('.box-tb').querySelectorAll('.item');
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function() {
                // 導(dǎo)航欄樣式切換，排他算法
                for (var i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                this.className = 'current';

                // 下面展示內(nèi)容切換，排他算法
                var index = this.getAttribute('data-index');
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

頁面效果：