Javascript：在多个元素（ID 和类）上设置 Z 索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5808241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Setting Z-Index on Multiple Elements (ID & Class)
提问by Beau
I have a javascript function that is supposed to hide and show layered divs by simply changing the z-index. I don't know if this is the best way to do it, but it works except for one issue. I have the content divs (absolutely positioned in CSS on top of each other), but I also have a navigation div (absolutely positioned in CSS at the bottom of the page) that should always remain on top. So I have this javascript code:
我有一个 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>
And I have this html:
我有这个 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>
The problem is that the z-index line for the navigation div messes it up. Not only does it not execute, but anything I put after it doesn't get executed as well (even a basic alert). If I change navigation from a class to an id, it works fine, but I'm going to have multiple navigation divs on each page (multiple slides in a SlideDeck). I could just set the navigation div's z-index to 99999, but I wanted to see why it wasn't working in the "cleaner" way, since it looks like I might be making a basic mistake.
问题是导航 div 的 z-index 行把它搞砸了。它不仅不会执行，而且我在它之后放置的任何东西也不会被执行（甚至是基本警报）。如果我将导航从一个类更改为一个 id，它工作正常，但我将在每个页面上有多个导航 div（SlideDeck 中的多个幻灯片）。我可以将导航 div 的 z-index 设置为 99999，但我想看看为什么它不能以“更干净”的方式工作，因为看起来我可能犯了一个基本错误。
Thank you.
谢谢你。
回答by arussell84
I'm not sure if this is exactly what you're after, but you need to create a loop for getElementsByTagName or getElementsByClassName:
我不确定这是否正是您想要的，但您需要为 getElementsByTagName 或 getElementsByClassName 创建一个循环：
var cells = table.getElementsByClassName('nav');
for (var i = 0; i < cells.length; i++) {
cells[i].style.zIndex = z++;
}
Edit: Changed method call to getElementsByClassName. I initially just took what he wrote and added the loop.
编辑：将方法调用更改为 getElementsByClassName。我最初只是采用了他写的内容并添加了循环。
回答by kcbanner
Looks like your problem is that you are trying to use getElementsByTagName when you should be using getElementsByClassName. getElementsByTagNamesearches for elements based on tag name, like 'div' or 'span', not class names.
看起来您的问题是您在应该使用 getElementsByClassName 时尝试使用getElementsByTagName。getElementsByTagName根据标签名称搜索元素，例如“div”或“span”，而不是类名称。
So, use it like this:
所以，像这样使用它：
<script type="text/javascript">
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script>
Keep in mind that method was added in Firefox 3 and may not be supported in your browser. I would recommend using something like jQuery to maintain cross browser compatibility. Using jQuery, it would look like this:
请记住，该方法是在 Firefox 3 中添加的，您的浏览器可能不支持。我建议使用类似 jQuery 的东西来保持跨浏览器的兼容性。使用 jQuery，它看起来像这样：
<script type="text/javascript">
var z = 1;
function showHide(id) {
$('#'+id).style.zIndex = z++;
$('.nav').style.zIndex = z++;
}
</script>
