Javascript 单击CSS、JSP中的按钮时，一个div消失，另一个div同时出现

我对网络编程一无所知。 我刚刚学习了HTML和CSS，但对Java脚本一无所知

我现在的处境是这样的。 有两个按钮和两个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脚本时，我完全是个蹒跚学步的孩子。所以我只是复制粘贴它

---

脚本部分。我可以通过修改脚本获得“显示/消失”效果吗？

一种可能的解决方案是显示一个俯冲，隐藏第二个俯冲

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>

---

一种可能的解决方案是显示一个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>

---

谢谢你，先生~！只需几次调整。显示->。可见性，阻止/无->可见/隐藏，我就得到了我想要的效果。谢谢先生~！只需几次调整。显示->。可见性，块/无->可见/隐藏，我就能得到想要的效果。