js的排他思想模拟实现导航的切换

最新推荐文章于 2022-09-06 20:49:23 发布

大闸蟹~

最新推荐文章于 2022-09-06 20:49:23 发布

阅读量119

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/YCHH1/article/details/123400196

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<body>
    <div class="con">
        <ul class="nav">
            <li class="on">第1项</li>
            <li>第2项</li>
            <li>第3项</li>
            <li>第4项</li>
            <li>第5项</li>
        </ul>

        <div class="content">
            <div class="show">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
    <script>
        var lis = document.getElementsByTagName("li");
        var content = document.getElementsByClassName("content")[0];
        var items = content.getElementsByTagName("div");

        for(var i = 0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j=0;j<lis.length;j++){
                    lis[j].classList.remove("on");
                    items[j].classList.remove("show")
                }
                this.classList.add("on");
                items[this.index].classList.add("show")
            }
        }
    </script>
</body>

大闸蟹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js的排他思想模拟实现导航的切换

<body> <div class="con"> <ul class="nav"> <li class="on">第1项</li> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项
复制链接

扫一扫