javascript - 切换可见性(当另一个 div 元素呈现可见时自动导致隐藏)

Question

本质上，我想做的是创建一个网站，该网站的所有内容都在主页上，但在任何时候只有部分内容可见。我阅读的方法是通过切换可见性。

我遇到的问题是:假设主页在您第一次访问该网站时是空白的(这是我希望的样子)。假设您点击了“关于我们”链接。突然之间，关于我们的部分变得可见(我希望它成为这样)。现在我遇到的问题是，当我知道可以点击“产品”链接时，我希望“产品”内容变得可见，而“关于我们”内容再次变得不可见。 (本质上创造了在同一页面中打开新页面的错觉)。

这是我到目前为止编写的代码。我可以使某些 div 元素可见和不可见 (onclick)，但我不知道如何确保在任何时候只有一个 div 元素可见。

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

使 JavaScript 工作的链接如下所示:

< href="#" onclick="toggleVisibility();">About

< href="##" onclick="toggleVisibility1();"> Products
        

Answer 1

这是另一个简单的函数

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a>
<div id="foo">blablabla</div>