javascript - CSS、JSP中点击按钮时一个div消失，同时出现另一个div

Question

我对网络编程完全陌生。 我刚刚学习了 HTML 和 CSS，但对 Java Script 没有任何了解。

我的情况是这样的。 有两个按钮和两个 div。 如果单击一个按钮，则会出现该按钮中相关的 div。(可见性:可见) 再次单击同一按钮，div 消失。 因此，现在当我一次单击按钮时，两个 div 会重叠。

现在我想建立一个这样的效果。 如果已经点击了一个按钮(已经出现了一个div)，然后点击另一个 按钮，然后第一个 div 消失，同时出现另一个 div。(替换位置)

    <script>

    function show1() {
        document.getElementById("div1").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.button1'))
            var dropdowns = document.getElementsByClassName("div1_pop");
    }
    function show2() {
        document.getElementById("div2").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.button2'))
        var dropdowns = document.getElementsByClassName("div2_pop");
    }

    </script>

对于 Java 脚本，我还是个 child 子。所以我只是复制并粘贴 脚本部分。我可以获得修复该脚本的出现/消失效果吗？

Answer 1

一种可能的解决方案是显示一个 div 并隐藏第二个 div。

function show1() {
    document.getElementById("div1").style.display = "block";
    document.getElementById("div2").style.display = "none";
}
window.onclick = function(event) {
    if (!event.target.matches('.button1'))
        var dropdowns = document.getElementsByClassName("div1_pop");
}
function show2() {
    document.getElementById("div1").style.display = "none";
    document.getElementById("div2").style.display = "block";
}
window.onclick = function(event) {
    if (!event.target.matches('.button2'))
    var dropdowns = document.getElementsByClassName("div2_pop");
}

</script>