html toggle自动隐藏,Javascript / HTML – 切换可见性(当另一个div元素呈现可见时自动导致一个div元素隐藏)...

基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性.

我遇到的问题是：假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点击“关于我们”链接.突然之间,关于我们的部分变得可见(我希望它的方式).现在我遇到的问题是,当我知道让我们说点击“产品”链接时,我希望“产品”内容变得可见,“关于我们”的内容再次变得不可见. (基本上创建了在同一页面中打开新页面的错觉)

这是我到目前为止提出的代码.我可以使某些div元素可见和不可见(onclick)但我无法弄清楚如何确保在任何时候只有一个div元素可见.

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";

}

}

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";

}

}

使javascript工作的链接如下所示：

< href =“#”onclick =“toggleVisibility();”>关于

< href =“##”onclick =“toggleVisibility1();”>制品