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>

问题是导航分区的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>

Javascript：在多个元素上设置Z-Index（ID＆amp; Class）

2 个答案: