對圖像的Javascript懸停問題

我正在嘗試使用javascript創建效果。對圖像的Javascript懸停問題

效果：

當我點擊任何菜單上它是顯示活動圖像是symb1.png。以下是我的代碼：

的CSS：

<style> 
    li{display:inline;padding:0 10px; z-index:-1;} 
    .red{ background-image:url('symb1.png'); background-repeat:no-repeat;} 
</style>

的HTML身體標記

<ul id="menu"> 
    <li><a href="#" class="red" onClick="selected(this)">MENU</a></li> 
    <li><a href="#" onClick="selected(this)">MENU 1</a></li> 
    <li><a href="#" onClick="selected(this)">MENU 2</a></li> 
</ul>

最終收盤HTML體標記之前Javasript代碼：

<script> 
    function selected(obj){ 
     var lilist = document.getElementById('menu'); 
     var alist = lilist.getElementsByTagName('a'); 
     for (i=0; i<alist.length; i++) 
     { 
      alist[i].className=""; 
     } 
     obj.className="red"; 
    } 
</script>

它與文本菜單，菜單1，菜單2等正常工作，但如果我把任何圖像，而不是文字，然後它不起作用。它不顯示活動圖像。爲什麼會發生？

更新：

<html> 
<head> 
<style type="text/css"> 
li{display:inline;padding:0 10px; z-index:-1;} 
.red{ background-image:url(symb1.png); background-repeat:no-repeat;} 
</style> 
</head> 
<body> 
<ul id="menu"> 
<li><a href="#" class="red">MENU</a></li> 
<li><a href="#" onClick="selected(this)">MENU 1</a></li> 
<li><a href="#" onClick="selected(this)">MENU 2</a></li> 
</ul> 
<script> 
$('ul li a').click(function(){ 
$('ul li a').removeClass('red'); 
$(this).addClass('red'); 
}); 
</script> 
</body> 
</html>

來源

2013-05-13 Alex Mojum

你是否反對使用jQuery庫？ – 2013-05-13 17:48:18

@JonHarding我是Javascript新用戶。這是我的學習時間.. – 2013-05-13 17:51:58

你的大概很可能是一個不好的路徑到您的形象。我肯定會推薦熟悉jQuery庫 – 2013-05-13 17:52:41

不知道你是開放的jQuery的，但這裏是一個非常簡單的解決方案。此外，這裏是一個jsfiddle所以你可以看到它在行動：

的jQuery：

$(document).ready(function() { 
    $('ul li a').click(function(){ 
     $('ul li a').removeClass('red'); 
     $(this).addClass('red'); 
    }); 
});

你的代碼的其餘部分保持不變。當然，你需要在你的文檔的頭部包含jquery庫：

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

來源

2013-05-13 17:51:51

我看到了你的鏈接。點擊時顯示紅色。但我試圖展示圖片而不是紅色。可能嗎？ – 2013-05-13 17:54:06

是的，這只是切換添加/刪除類，您可以更改'紅色'類以包含對圖像的引用。 – 2013-05-13 17:55:01

好吧，我正在嘗試。 – 2013-05-13 17:57:08

對圖像的Javascript懸停問題

回答

相關問題