Javascript：在多個元素（ID和類）上設置Z索引

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> 

我有這個網站：

<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>