JavaScript實現tab欄切換的效果

tab欄：點選不同的標籤，顯示不同的內容，被點選的標籤樣式發生改變（突出選中的是哪一個）

實現思路：

1、將tab欄分為上下兩部分，上面是導航列表，下面是各部分對應的內容。把標籤和內容都寫出來，內容按照標籤順序依次順著寫，給標籤都新增自定義屬性- - -index，屬性值從0開始，依次增加1

2、首先實現上面的效果，點選後樣式切換，被點選的字型顏色、背景顏色改變等:

①定義一個類eg：current，裡面定義改變後的樣式，先給第一個標籤寫一個該類名，其他的不寫類名，
②獲取所有標籤元素物件，- - -for迴圈- - -遍歷給每個標籤繫結- - -onclick點選事件
③點選事件裡面使用排他演算法- - -for迴圈- - -將所有標籤設定類名為空- - -className = ‘' ，然後當前被點選的標籤設定上面定義的特殊類名- - -this.className = ‘current';

3、實現下面，根據點選的標籤，出現不同的內容：

①css將第一個標籤對應內容顯示，其他的都隱藏起來：

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

②獲取內容的全部元素物件，獲取標籤的index值，在點選事件裡再新增一個排他思想程式碼- - -for迴圈- - -遍歷內容的元素物件，將所有內容設定隱藏- - -items[i].style.display = ‘none';然後根據被點選的標籤，將對應的內容顯示- - -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="vihttp://www.cppcns.com 
ewport" 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;
  www.cppcns.com      }
        
        .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">春季排四季之首，新的輪迴從此開啟。春，代表著溫暖、生長，植物發芽，風和日暖，鳥語花香。這季節的氣溫、日照、降雨，處於一年中的轉折點，趨於上升或增多。春季，陰陽之氣開始轉變，萬物隨陽氣上升而萌牙生長，春季是萬物生長、春耕播種的季節，所謂“一年之計在於春”。 春季起始—結束： 依據天象變化劃分：傳統上是以“立春”（鬥指寅，太陽達黃經315時）作為春季的起點，至“立夏”結束。 依據氣溫變化劃分：近代採用學者張寶堃的“候平均氣溫”劃分，以候平均溫度(連續5天氣溫的平均)從10℃以下穩定升到10℃以上時作為春季開始，至候平均溫度22℃以上（入夏）時結束。
            </div>
            <div class="item">夏季萬物至此皆盛，是農作物進入旺季生長的一個季節。溫度升高，天氣炎熱，狂風暴雨頻發，萬物盛長。夏季是風暴最多的季節，常伴隨著大風、暴雨。北半球夏季，大陸受熱氣壓上升形成低氣壓，海洋恆溫溫度相對較低形成高氣壓，根據環流，夏季吹的是東南風。夏季北半球各地的白晝時間全年最長。 夏季起始—結束： 依據天象變化劃分：以“立夏”（鬥指東南，太陽達黃經45）作為夏季的起點，至“立秋”結束。 依據氣溫變化劃分：以候平均溫度穩定升到22℃以上時作為夏季開始，至候平均溫度22℃以下時結束。
            </div>
            <div class="item">秋季是收穫季節，意味著萬物開始從繁茂成長趨向蕭索成熟。秋季的前兩個節氣立秋、處暑，還是酷熱天氣，因太陽所帶來的熱力未減弱，所謂“熱在三伏”，三伏天出現在小暑與處暑之間，是一年中氣溫最高且又潮溼、悶熱的日子。造成三伏天溼度高原因是，三伏天吹東南風，而東南方是太平洋和印度洋，空氣潮溼，風的潮溼造成了三伏天溼度大；到了深秋之後則相反，吹西北風，而西北方是乾燥的內陸，乾燥的西北風造成深秋之後氣候乾燥。秋季前兩個節氣的氣候特徵為潮溼、悶熱，秋季真正涼爽一般要到白露節氣之後，自白露起漸漸趨向涼爽、乾燥。隨著進入深秋，氣候由熱轉涼，萬物隨寒氣增長，逐漸蕭落，這是熱與冷交替的季節。秋季最明顯的變化草木的葉子從繁茂的綠色到發黃，並開始落葉莊稼則開始成熟。
                [1] 秋季起始—結束： 依據天象變化劃分：以“立秋”（鬥指西南，太陽達黃經135）作為秋季的起點，至“立冬”結束。 依據氣溫變化劃分：以候平均溫度從22℃以上穩定降到22℃以下作為秋季開始，至候平均溫度降到10℃以下時結束。
            </div>
            <div class="item">冬季，陰陽轉變，萬物由收到藏，植物生氣閉蓄。進入立冬後意味著秋季少雨乾燥氣候漸過去，轉為陰雨寒凍的冬季氣候特徵。北半球的太陽高度小，白晝時間短。所謂“熱在三伏”，冷在三九”，冬至為"一九天"，冬至之前還不算很冷，冬至過後強冷空氣南下頻繁，並越過了南嶺，氣溫驟降，天氣cMtOvyAL寒冷。冬季真正寒冷，是在冬至後。 冬季起始—結束： 依據天象變化劃分：以“立冬”（鬥指西北，太陽達黃經225）作為冬季的起點，至下一“立春”結束。 依據氣溫變化劃分：以候平均溫度穩定降到10℃以下為冬季的開始，至候平均溫度10℃以上時結束。
            </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() {
                // 導航欄樣式切換，排他演算法
                for (var i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                this.className = 'current';

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

</html>

頁面效果：

JavaScript實現tab欄切換的效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現tab欄切換的效果

實現思路：

程式碼示例：

JavaScript實現tab欄切換效果

JavaScript實現tab欄切換的效果

js實現tab欄切換效果

jQuery實現tab欄切換效果

JavaScript實現Tab欄切換特效

JavaScript TAB欄切換效果的示例

JQuery-實現Tab-欄切換

jQ與JS實現tab欄切換案例

幾種實現tab欄切換的方法

JavaScript實現標籤頁切換效果

JS實現Tab欄切換

JavaScript實現簡易tab欄切換內容欄

JavaScript實現簡易tab欄切換案例

JavaScript實現Tab選項卡切換

React實現類似淘寶tab居中切換效果的示例程式碼

JavaScript實現Tab標籤頁切換的最簡便方式(4種)

vue實現tab欄點選高亮效果

JavaScript 面向物件TAB欄切換

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

vue二選一tab欄切換新做法實現

JavaScript實現tab欄切換的效果

實現思路：

程式碼示例：

相關推薦