用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡

更新時(shí)間：2021年09月16日 17:31:18 作者：夢(mèng)里～花開(kāi)又半夏…

這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

tab選卡 現(xiàn)實(shí)網(wǎng)頁(yè)的使用頻率極高，基本上每個(gè)網(wǎng)頁(yè)都需要使用一個(gè)或多個(gè)tab選卡

我們可以用js實(shí)現(xiàn)簡(jiǎn)單的tab選卡效果

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>簡(jiǎn)單的選卡效果</title>
    <style>
        body,ul{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .nav ul{
            display: flex;
        }
        .nav li{
            width: 40%;
            margin: 1rem;
            text-align: center;
            font-size: 1.3rem;
        }
        .selected{
            background-color: yellow;
        }
        .content div{
            display: none
        }
        /* 初始的時(shí)候 只讓第一塊內(nèi)容顯示出來(lái) */
        .content div:nth-child(1){
            display: block;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <!-- 初始的時(shí)候 讓第一個(gè)選項(xiàng)被選中 -->
            <li class="selected">導(dǎo)航1</li>
            <li>導(dǎo)航2</li>
            <li>導(dǎo)航3</li>
        </ul>
    </div>
    <div class="content">
        <div>內(nèi)容1</div>   
        <div>內(nèi)容2</div>  
        <div>內(nèi)容3</div>   
    </div>
    <script>
            //獲得導(dǎo)航的所有選項(xiàng)
            var li=document.querySelectorAll(".nav li");
            //獲得內(nèi)容的所有div
            var div=document.querySelectorAll(".content div")
            for(var i=0;i<li.length;i++){
                  //關(guān)鍵 讓li與div建立聯(lián)系
                li[i].index=i;
                li[i].onmouseover=function(){
                   //將所有選項(xiàng)樣式清空，所有內(nèi)容隱藏
                    for(var j=0;j<li.length;j++){
                        li[j].className="";
                        div[j].style.display="none"
                    }
                    //為鼠標(biāo)懸浮的選項(xiàng)設(shè)置樣式 其對(duì)應(yīng)的div顯現(xiàn)出來(lái)
                    this.className="selected";
                    div[this.index].style.display="block";
                }
            }
        </script>
</body>

</html>

需要注意的是：this，此時(shí)的this相當(dāng)于li[i]。
li[i].index=i; 這一步必不可少，這是讓li與div建立聯(lián)系的關(guān)鍵，如果直接把div[this.index].style.display=“block”;這句代碼改為div[i].style.display=“block”;將會(huì)達(dá)不到效果，這是因?yàn)閕的值一直在加一，最后將會(huì)等于li.length，使得將出現(xiàn) 不管鼠標(biāo)在哪個(gè)選項(xiàng) 每個(gè)div都不會(huì)顯示的錯(cuò)誤結(jié)果。

正確的效果圖為：