Question

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else { 
document.getElementById(layer).style.display="none";
}
}

我需要此代码来关闭当前图层，然后打开另一个图层。这些图层存在于内容div中，并且嵌套在12深处。

例如：

这是在容器（导航）的主体中控制嵌套深度为12的内容容器。（我自己提出了一个想法，但它关闭了所有层次，使我的网页消失了）

<li><a href="#" onclick="javascript:showlayer('USNews')">US News</a></li>

因此，当通过上面点击标记为US News的导航按钮时，它会打开

现在，如果我打开美国新闻，我点击说Politics（第三个嵌套图层，我希望USNews（第一个嵌套图层）关闭，只打开Politics（当然注意到Politics是第三层）和USNews是第一层......等等..

我试过了其他的陈述，但我已经离开这个多年了，而且我只是感到沮丧而且无法相信......任何帮助都会受到高度赞赏

Answer 1

您可以循环所有图层并隐藏它们。然后才显示选定的一个。

function showlayer(layer){

var Layers=document.getElementsByTagName("div");
for(i=0;i<Layers.length;i++){
    if(Layers.getAttribute("class")=="layer"){
    Layers.style.display="none";
    }
}
document.getElementById(layer).style.display="block";
}


<li onclick="javascript:showlayer('USNews')"><a href="#" >US News</a></li>
<li onclick="javascript:showlayer('UkNews')"><a href="#" >Uk News</a></li>
<li onclick="javascript:showlayer('ArNews')"><a href="#" >Ar News</a></li>

<div id="USNews" class="layer"></div>
<div id="UkNews" class="layer"></div>
<div id="ArNews" class="layer"></div>

Answer 2

为什么不使用库来代替编写原始Javascript。

在JQuery中，您可以移动到正确的图层，并相对容易地隐藏或显示它（可能是一行脚本tbh。）

当存在多个嵌套层时隐藏show div

2 个答案: