JavaScript实现导航栏动态切换-优快云博客

本文链接：https://blog.youkuaiyun.com/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++) {
        btns[i].onclick = function () {
            let str = btns[i].innerHTML;
            if (str == "1") {
                hiddens();
                divs[0].style.display = "block";
            } else if (str == "2") {
                hiddens();
                divs[1].style.display = "block";
            } else if (str == "3") {
                hiddens();
                divs[2].style.display = "block";
            }
        }
    }
    function hiddens() {
        for (let i = 0; i < divs.length; i++) {
            divs[i].style.display = "none";
        }
    }
</script>

理念就是先获取button，然后循环这些按钮，然后给他们设一个点击事件

先把三个div全部隐藏然后再判断他们是否等会页面上的那个值，如果是就先把全部隐藏再单独显示那个div就可以了