使用forEach和ES6实现tab切换的示例代码

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本文主要介绍了使用forEach和ES6实现tab切换的示例代码，分享给大家，具体如下：

效果:

请添加图片描述

html代码:

  <ul class="nav">
        <!-- <li>
            <a href="">前端</a>
            <ul class="select">
                <li>就业班</li>
                <li>精品</li>
                <li>学院福利</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 class="lazy" data-src="../阶段四jquery/jquery编程/jquery.min.js"></script>
     <script>
        var arr1 = ['前端', 'Python', 'JavaEE'];
        var arr2 = ['就业班', '精品', '学院福利'];
        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>

到此这篇关于使用forEach和ES6实现tab切换的示例代码的文章就介绍到这了,更多相关forEach和ES6实现tab切换内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉