使用forEach和ES6實現(xiàn)tab切換的示例代碼

更新時間：2022年04月22日 14:21:01 作者：代森森

tab切換在很多菜單欄中都可以用到，本文主要介紹了使用forEach和ES6實現(xiàn)tab切換的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文主要介紹了使用forEach和ES6實現(xiàn)tab切換的示例代碼，分享給大家，具體如下：

效果:

請?zhí)砑訄D片描述

html代碼:

  <ul class="nav">
        <!-- <li>
            <a href="">前端</a>
            <ul class="select">
                <li>就業(yè)班</li>
                <li>精品</li>
                <li>學(xué)院福利</li>
            </ul>
        </li>
        <li>
            <a href="">Python</a>

        </li>
        <li>
            <a href="">JavaEE</a>

        </li> -->
    </ul>

css代碼：

        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        li {
            width: 70px;
            list-style: none;
        }
        
        .nav {
            text-decoration: none;
            list-style: none;
        }
        
        .nav>li {
            background-color: lightsteelblue;
            padding: 10px 15px;
            text-align: center;
            float: left;
        }

js代碼：

 <script src="../階段四jquery/jquery編程/jquery.min.js"></script>
     <script>
        var arr1 = ['前端', 'Python', 'JavaEE'];
        var arr2 = ['就業(yè)班', '精品', '學(xué)院福利'];
        var nava = ``;
        var naul = ``;
        arr1.forEach(function(item) {
            console.log(item);
            nava += `<li><a href="">${item}</a><ul class=" rel="external nofollow" select"></ul></li> `;
            $(".nav").html(nava);

        });

        arr2.forEach(function(item) {
            console.log(item);
            naul += `<li>${item}</li>`;
            $(".select").html(naul);
        });


        $(".nav>li").children("ul").hide();


        $(".nav>li").mouseleave(function() {
            $(this).children("ul").hide();
        });

        $(".nav>li").mouseover(function() {
            $(this).children("ul").show();

        });
    </script>

到此這篇關(guān)于使用forEach和ES6實現(xiàn)tab切換的示例代碼的文章就介紹到這了,更多相關(guān)forEach和ES6實現(xiàn)tab切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: