Javascript：在多个元素（ID和类）上设置Z索引

我有一个javascript函数，可以通过简单地更改z索引来隐藏和显示分层div。我不知道这是否是最好的方法，但除了一个问题，它是有效的。我有content div（绝对位于CSS中的每个div之上），但我也有导航div（绝对位于CSS中的页面底部），它应该始终保持在顶部。所以我有以下javascript代码：

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByTagName('nav').style.zIndex = z++;
}
</script> 

var z=1；
函数showHide（id）{
document.getElementById（id）.style.zIndex=z++；
document.getElementsByTagName（'nav'）.style.zIndex=z++；
}

我有一个html：

<div id="1a" class="content" style="z-index:1;">Content</div>
<div id="1b" class="content">More Content</div>
<div id="1c" class="content">Even More Content</div>
<div class="nav" style="z-index:2;">
  <a href="#" onclick="showHide('1a')">1</a> 
| <a href="#" onclick="showHide('1b')">2</a> 
| <a href="#" onclick="showHide('1c')">3</a></div>

内容
更多内容
更多内容
|  
| 

问题是导航div的z索引行把它弄乱了。它不仅不会执行，而且我放在它后面的任何东西也不会执行（甚至是一个基本警报）。如果我将导航从一个类更改为一个id，它可以正常工作，但我将在每个页面上有多个导航div（在一个SlideDeck中有多个幻灯片）。我可以将导航div的z-index设置为99999，但我想知道为什么它不能以“更干净”的方式工作，因为看起来我可能犯了一个基本的错误

---

谢谢。

我不确定这是否正是您想要的，但您需要为getElementsByTagName或getElementsByClassName创建一个循环：

var cells = table.getElementsByClassName('nav');
for (var i = 0; i < cells.length; i++) {
    cells[i].style.zIndex = z++;
}

var cells=table.getElementsByClassName（'nav'）；
对于（变量i=0；i

---

编辑：更改了对getElementsByClassName的方法调用。起初，我只是接受了他写的内容并添加了循环。

看起来您的问题在于，您试图在应该使用的时候使用getElementsByTagName。基于标记名（如“div”或“span”）而不是类名搜索元素

所以，像这样使用它：

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  document.getElementById(id).style.zIndex = z++;
  document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script> 

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  $('#'+id).style.zIndex = z++;
  $('.nav').style.zIndex = z++;
}
</script> 

var z=1；
函数showHide（id）{
document.getElementById（id）.style.zIndex=z++；
document.getElementsByClassName（'nav'）[0].style.zIndex=z++；
}

请记住，该方法是在Firefox3中添加的，在您的浏览器中可能不受支持。我建议使用jQuery之类的工具来保持跨浏览器的兼容性。使用jQuery，它将如下所示：

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  document.getElementById(id).style.zIndex = z++;
  document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script> 

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  $('#'+id).style.zIndex = z++;
  $('.nav').style.zIndex = z++;
}
</script> 

var z=1；
函数showHide（id）{
$（'#'+id）.style.zIndex=z++；
$（'.nav'）.style.zIndex=z++；
}

getElementsByTagName将标记名作为参数，而不是类。非常感谢，arussell84，但这并没有完全解决这个问题。实际上，我将把导航div放到每个内容div中。这样，我也可以轻松地停用活动内容div的链接。谢谢，kcbanner。我不想使用不通用的东西，所以我可能会尝试您的第二种解决方案。然而，就像我说的，我只想在每个内容分区中包含nav。但是我很感谢你让我知道我做错了什么。