按钮控制div切换_js点击按钮切换div内容

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

按钮控制div切换是一种常见的网页交互效果，通过点击按钮来切换显示不同的div内容。这种交互效果可以通过JavaScript来实现。

我们需要在HTML代码中定义两个div，分别是需要切换显示的内容。然后，我们需要在HTML代码中添加一个按钮，用于触发切换操作。接着，我们需要使用JavaScript来编写代码，实现按钮点击切换div内容的功能。

下面是一个示例代码，演示了如何使用JavaScript来实现按钮控制div切换的效果：


<!DOCTYPE html>
<html>
<head>
    <title>按钮控制div切换</title>
    <style>
        .content {
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">切换内容</button>
    <div id="div1" class="a1d5-5ca4-945c-e881 content">
        <h1>内容1</h1>
        <p>这是第一个div的内容。</p>
    </div>
    <div id="div2" class="5ca4-945c-e881-ff6a content">
        <h1>内容2</h1>
        <p>这是第二个div的内容。</p>
    </div>
    <script>
        var btn = document.getElementById("btn");
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        btn.addEventListener("click", function() {
            if (div1.style.display === "none") {
                div1.style.display = "block";
                div2.style.display = "none";
            } else {
                div1.style.display = "none";
                div2.style.display = "block";
            }
        });
    </script>
</body>
</html>

在上面的示例代码中，我们首先在CSS样式中设置了.content类的display属性为none，这样初始时两个div内容是隐藏的。然后，在JavaScript代码中，我们通过getElementById方法获取了按钮和两个div的引用。接着，我们给按钮添加了一个click事件监听器，当按钮被点击时，会执行回调函数。

回调函数中，我们通过判断第一个div的display属性是否为none来确定当前显示的是哪个div。如果第一个div是隐藏的，那么点击按钮后，我们将第一个div显示出来，同时隐藏第二个div；反之，如果第一个div是显示的，那么点击按钮后，我们将第一个div隐藏，同时显示第二个div。

这样，当我们点击按钮时，就可以实现切换div内容的效果。

需要注意的是，上述示例代码只是一种实现方式，实际上还有很多其他的方法可以实现按钮控制div切换的效果。例如，可以使用CSS的类名切换来控制div的显示和隐藏，或者使用jQuery等JavaScript库来简化代码。这些都是根据具体需求和开发环境来选择的。