您所在的位置：首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】如何實現網頁中常見的切換效果

【Web前端基礎知識】如何實現網頁中常見的切換效果

發布： Web前端培訓
來源：Web前端干貨資料
2020-11-25 11:26:42
閱讀()
分享

手機端入口

在頁面中tab切換非常的常見，我們先來看下網站中tab切換的實際案例。

我們來做一個簡單的tab切換的案例吧~學會了下面的案例，只要通過更改樣式，就可以實現上面實例中的樣子啦~

一、需求：

1.三個標題對應三個內容區域。

2.默認“標題1“文字顏色是紅色，其他標題文字顏色為黑色。

3.“標題1“對應的”內容1“展示出來，其他兩個內容區域隱藏。

4.點擊“標題幾“： ”標題幾“的文字顏色是紅色，其他標題顏色為黑色，對應的”內容幾“展示出來，其他內容區域隱藏。

如圖所示：

二、樣式和結構：

我們先寫結構和樣式部分：

<style>

.on{

       /* 讓class名是on的元素，文字變成紅色 */

       color: red;

   }

   #con div{

        width: 200px;

        height: 200px;

        border:10px solid orange;

        /* 讓內容區域都隱藏起來 */

         display: none;

    }

    #con .active{

         /* 讓class名是active的元素顯示出來 */

         display: block;

    }

</style>

<body>

    <div id="btn">

        <button class="on">標題1</button>

        <button>標題2</button>

        <button>標題3</button>

    </div>

    <div id="con">

        <div class="active">內容1</div>

        <div>內容2</div>

        <div>內容3</div>

    </div>

</body>

三、按鈕部分分析：

1.點擊每個按鈕之后所干的事是一樣的，所以我們用for循環寫。

2.點擊按鈕之后，我們先去掉所有按鈕的class名，這樣所有按鈕里的文字顏色就都是默認的黑色。

3.然后我們給當前點擊的這個按鈕加上class名是on就可以了，上面樣式里面我們已經定義好了class名是on的元素文字顏色是紅色。

代碼如下：

for(var i = 0; i < obtn.length; i++){

// 點擊按鈕

   obtn[i].onclick = function(){

    for(var j = 0; j<obtn.length; j++){

        // 去掉所有按鈕的class名。

         obtn[j].className = "";

      }

         // 給當前點擊的這個按鈕加上class名是on

         this.className = "on";

}

}

四、按鈕當前的索引：

我們需要定義按鈕當前的索引，點擊第幾個按鈕就把對應索引的第幾個內容展示出來。

代碼如下：

obtn[i].index = i;

當i=0時，btns[0].index就是0;

當i=1時，btns[0].index就是1;

當i=0時，btns[2].index就是2。

五、展示對應索引的內容區域：

1. 我們需要先把所有內容區域都隱藏，所以我們使用for循環來寫。

2. 把所有內容區域div的class名去掉就可以了。

3. 把當前索引對應的內容區域展示出來，只需要把class名active加上就可了，active的樣式我們在上面已經寫過了。

代碼如下：

//隱藏所有內容區域。

for(var j = 0; j<ocon.length; j++){

ocon[j].className = '';

}

//當前索引對應的內容展示出來。

ocon[this.index].className = 'active';

六、代碼優化：

我們發現按鈕的長度(obtn.length)和內容的長度(ocon.length)是一樣的，上面我們是用兩個for循環來寫，其實我們可以把代碼優化下，改成用一個for循環就可以了。代碼如下：

for(var j = 0; j<obtn.length; j++){

// 去掉所有按鈕的class名。

obtn[j].className = "";

//隱藏所有內容區域。

ocon[j].className = '';

}

七、完整代碼如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>tab切換</title>

    <style>

        .on{

            /* 讓class名是on的元素，文字變成紅色 */

            color: red;

        }

        #con div{

            width: 200px;

            height: 200px;

            border:10px solid orange;

            /* 讓內容區域都隱藏起來 */

            display: none;

        }

        #con .active{

            /* 讓class名是active的元素顯示出來 */

            display: block;

        }

    </style>

</head>

<body>

    <div id="btn">

        <button class="on">標題1</button>

        <button>標題2</button>

        <button>標題3</button>

    </div>

    <div id="con">

        <div class="active">內容1</div>

        <div>內容2</div>

        <div>內容3</div>

    </div>

    <script>

        //獲取到id名是btn的元素。

        var btn = document.getElementById("btn");

        //獲取到btn里面標簽名是button的元素，也就是獲取到3個按鈕。

        var obtn = btn.getElementsByTagName("button");

        //獲取到id名是con的元素。

        var con = document.getElementById("con");

        //獲取到con里面標簽名是div的元素，也就是獲取到3個內容。

        var ocon = con.getElementsByTagName("div");





        for(var i = 0; i < obtn.length; i++){

            //給每個按鈕定義了一個index屬性，這個index是屬于obtn[i]的屬性和方法。

            obtn[i].index = i;

            // 點擊按鈕

            obtn[i].onclick = function(){

                for(var j = 0; j<obtn.length; j++){

                    // 去掉所有按鈕的class名。

                    obtn[j].className = "";

                    //隱藏所有內容區域。

                    ocon[j].className = '';

                }

                // 給當前點擊的這個按鈕加上class名是on

                this.className = "on";



                //當前索引對應的內容展示出來。

                ocon[this.index].className = 'active';

            }



        }

    </script>

</body>

</html>