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

Question

我有一个 javascript 函数，它应该通过简单地更改 z-index 来隐藏和显示分层 div。我不知道这是否是最好的方法，但除了一个问题外它有效。我有内容 div（在 CSS 中绝对位于彼此之上），但我也有一个导航 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> 

我有这个 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-index 线把它弄乱了。它不仅没有执行，而且我在它之后放置的任何内容也没有执行（甚至是基本警报）。如果我将导航从类更改为 id，它可以正常工作，但我将在每个页面上有多个导航 div（SlideDeck 中的多个幻灯片）。我可以将导航 div 的 z-index 设置为 99999，但我想看看为什么它不能以“更干净”的方式工作，因为看起来我可能犯了一个基本错误。

谢谢。

Answer 1

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

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

编辑：将方法调用更改为 getElementsByClassName。我最初只是把他写的东西加了循环。

Answer 2

看起来您的问题是您在应该使用 getElementsByClassName 时尝试使用 getElementsByTagName。 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> 

请记住，该方法是在 Firefox 3 中添加的，您的浏览器可能不支持该方法。我建议使用 jQuery 之类的东西来保持跨浏览器的兼容性。使用 jQuery，它看起来像这样：

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