變化的z-index用JavaScript

我在PHP製作一個網站變化的z-index用JavaScript

我做左側菜單這樣

enter image description here

這些菜單中的一個字符串從數據庫中來。我用回聲打印它。我使用圖像作爲每個菜單的背景。

現在我想這樣

enter image description here

我有一個箭頭圖像。

我知道我可以用z-index做到這一點。但我不能只用css來做。所以我需要一個幫助來做到這一點與JavaScript。我想用JavaScript或jQuery的

來源

2011-02-02 enthusiastic

的對於所有的CSS的解決方案嘗試建立你的菜單是這樣的...

<style type="text/css"> 
    .menu li { 
    background:url(path/to/gradient.png) top left repeat-x; 
    } 
    .menu li a { 
    display:block; 
    padding:2px 5px; 
    backround:url(path/to/arrow.png) bottom right no-repeat; 
    } 
</style> 


<ul class="menu"> 
    <li><a href="fanclub.php">Fan Club</a></li> 
    <li><a href="blog.php">Blog</a></li> 
    <li><a href="poll.php">Poll</a></li> 
</ul>

如果你必須做在JavaScript解決方案（我建議你避免的），你可以訪問一個企業的Z-index屬性y元素（支持它）像這樣：

// DOM Scripting Example (Single Element) 
myElement.style.zIndex = 1000; 

// jQuery Example (All elements with the "arrow" class) 
$('.arrow').css('z-index', 1000);

來源

2011-02-02 05:14:29

我會建議您的菜單，但無序列表。因爲它在技術上是導航鏈接的列表:) – corroded 2011-02-02 05:20:13

使用jQuery更改HTML：

$(function() { 
    $('.myselectorclass').css('z-index','1000'); 
});

替換 '1000' 與你的期望的z-index值，當然

來源

2011-02-02 05:08:29

變化的z-index用JavaScript

回答

相關問題