基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性.
我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点击"关于我们"链接.突然之间,关于我们的部分变得可见(我希望它的方式).现在我遇到的问题是,当我知道让我们说点击"产品"链接时,我希望"产品"内容变得可见,"关于我们"内容再次变得不可见.(基本上创造了在同一页面中打开新页面的错觉)
这是我到目前为止提出的代码.我可以使某些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>
Run Code Online (Sandbox Code Playgroud)
使javascript工作的链接如下所示:
<href ="#"onclick ="toggleVisibility();">关于
<href ="##"onclick ="toggleVisibility1();">产品