js实现导航栏切换

最新推荐文章于 2022-12-07 00:24:56 发布

hidden bug

最新推荐文章于 2022-12-07 00:24:56 发布

阅读量1.5k

点赞数 3

文章标签： css html5 html

本文链接：https://blog.csdn.net/hover_bug/article/details/120642116

版权

本文介绍如何使用JavaScript来实现导航栏的切换效果。通过获取按钮元素，循环绑定点击事件，首先隐藏所有相关div，然后根据按钮的值判断并显示对应的div内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

<script>
    let divs = document.querySelectorAll("div");
    let btns = document.querySelectorAll("button");
    hiddens();
    for (let i = 0; i < btns.length; i&

最低0.47元/天解锁文章