Javascript/HTML - 切换可见性(当另一个div元素呈现可见时自动导致一个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();">关于

<href ="##"onclick ="toggleVisibility1();">产品

Answer 1

使用 CSSdisplay:属性

元素消失

document.getElementById("products").style.display = "none";

元素出现并显示为块（div 的默认值）

document.getElementById("products").style.display = "block";

我在这里发布了示例代码：jQuery：菜单在单击时出现/消失 - V2

聚苯乙烯

在这里您可以找到有关显示和可见性之间差异的很好的示例：http://wiw.org/~frb/css-docs/display/display.html