小编Cor*_*y K的帖子

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

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

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

这是我到目前为止提出的代码.我可以使某些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();">产品

html javascript javascript-events toggleclass

8
推荐指数
1
解决办法
7万
查看次数

标签 统计

html ×1

javascript ×1

javascript-events ×1

toggleclass ×1