您所在的位置：首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】如何實(shí)現(xiàn)網(wǎng)頁中常見的切換效果

【W(wǎng)eb前端基礎(chǔ)知識】如何實(shí)現(xiàn)網(wǎng)頁中常見的切換效果

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

手機(jī)端入口

在頁面中tab切換非常的常見，我們先來看下網(wǎng)站中tab切換的實(shí)際案例。

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

一、需求：

1.三個標(biāo)題對應(yīng)三個內(nèi)容區(qū)域。

2.默認(rèn)“標(biāo)題1“文字顏色是紅色，其他標(biāo)題文字顏色為黑色。

3.“標(biāo)題1“對應(yīng)的”內(nèi)容1“展示出來，其他兩個內(nèi)容區(qū)域隱藏。

4.點(diǎn)擊“標(biāo)題幾“： ”標(biāo)題幾“的文字顏色是紅色，其他標(biāo)題顏色為黑色，對應(yīng)的”內(nèi)容幾“展示出來，其他內(nèi)容區(qū)域隱藏。

如圖所示：

二、樣式和結(jié)構(gòu)：

我們先寫結(jié)構(gòu)和樣式部分：

<style>

.on{

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

       color: red;

   }

   #con div{

        width: 200px;

        height: 200px;

        border:10px solid orange;

        /* 讓內(nèi)容區(qū)域都隱藏起來 */

         display: none;

    }

    #con .active{

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

         display: block;

    }

</style>

<body>

    <div id="btn">

        <button class="on">標(biāo)題1</button>

        <button>標(biāo)題2</button>

        <button>標(biāo)題3</button>

    </div>

    <div id="con">

        <div class="active">內(nèi)容1</div>

        <div>內(nèi)容2</div>

        <div>內(nèi)容3</div>

    </div>

</body>

三、按鈕部分分析：

1.點(diǎn)擊每個按鈕之后所干的事是一樣的，所以我們用for循環(huán)寫。

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

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

代碼如下：

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

// 點(diǎn)擊按鈕

   obtn[i].onclick = function(){

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

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

         obtn[j].className = "";

      }

         // 給當(dāng)前點(diǎn)擊的這個按鈕加上class名是on

         this.className = "on";

}

}

四、按鈕當(dāng)前的索引：

我們需要定義按鈕當(dāng)前的索引，點(diǎn)擊第幾個按鈕就把對應(yīng)索引的第幾個內(nèi)容展示出來。

代碼如下：

obtn[i].index = i;

當(dāng)i=0時(shí)，btns[0].index就是0;

當(dāng)i=1時(shí)，btns[0].index就是1;

當(dāng)i=0時(shí)，btns[2].index就是2。

五、展示對應(yīng)索引的內(nèi)容區(qū)域：

1. 我們需要先把所有內(nèi)容區(qū)域都隱藏，所以我們使用for循環(huán)來寫。

2. 把所有內(nèi)容區(qū)域div的class名去掉就可以了。

3. 把當(dāng)前索引對應(yīng)的內(nèi)容區(qū)域展示出來，只需要把class名active加上就可了，active的樣式我們在上面已經(jīng)寫過了。

代碼如下：

//隱藏所有內(nèi)容區(qū)域。

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

ocon[j].className = '';

}

//當(dāng)前索引對應(yīng)的內(nèi)容展示出來。

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

六、代碼優(yōu)化：

我們發(fā)現(xiàn)按鈕的長度(obtn.length)和內(nèi)容的長度(ocon.length)是一樣的，上面我們是用兩個for循環(huán)來寫，其實(shí)我們可以把代碼優(yōu)化下，改成用一個for循環(huán)就可以了。代碼如下：

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

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

obtn[j].className = "";

//隱藏所有內(nèi)容區(qū)域。

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;

            /* 讓內(nèi)容區(qū)域都隱藏起來 */

            display: none;

        }

        #con .active{

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

            display: block;

        }

    </style>

</head>

<body>

    <div id="btn">

        <button class="on">標(biāo)題1</button>

        <button>標(biāo)題2</button>

        <button>標(biāo)題3</button>

    </div>

    <div id="con">

        <div class="active">內(nèi)容1</div>

        <div>內(nèi)容2</div>

        <div>內(nèi)容3</div>

    </div>

    <script>

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

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

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

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

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

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

        //獲取到con里面標(biāo)簽名是div的元素，也就是獲取到3個內(nèi)容。

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





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

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

            obtn[i].index = i;

            // 點(diǎn)擊按鈕

            obtn[i].onclick = function(){

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

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

                    obtn[j].className = "";

                    //隱藏所有內(nèi)容區(qū)域。

                    ocon[j].className = '';

                }

                // 給當(dāng)前點(diǎn)擊的這個按鈕加上class名是on

                this.className = "on";



                //當(dāng)前索引對應(yīng)的內(nèi)容展示出來。

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

            }



        }

    </script>

</body>

</html>