更改多個div背景onclick，onmouseout和onmouseover

Question

我在這裏工作了30多個小時，我可能不會直截了當。

這是我的情況。我基本上有4個div，根據鼠標動作改變它們背景的不同方式。

讓我們在這裏調用div_1，div_2，div_3和div_4。

當用戶將鼠標移過菜單上的按鍵時，div_1和div_2應將其背景更改爲與按鈕相關的背景。

當用戶點擊一個按鈕時，所有4個div應該改變它們的背景並保持它，即使用戶將鼠標移動到別處。

而你需要想象的最後一種情況是用戶在一個按鈕上點擊並在另一個按鈕上通過鼠標之後。在這種情況下，div_1和div_2仍然會改變，但是如果用戶從菜單div_1中移除鼠標，並且div_2應該返回到與div_3和div_4相同背景的背景。

如果有人能幫助我認識到我的代碼有什麼問題，我將不勝感激。 TNX。

這裏是我的代碼：

 <ul> 
      <li id="menu-a1" onclick="Menu('a1','click');" onmouseover="('a1','over');" onmouseout="Menu('a1','out');" > <a href="#">Menu_a1</a> </li> 
      <li id="menu-a2" onclick="Menu('a2','click');" onmouseover="('a2','over');" onmouseout="Menu('a2','out');" > <a href="#">Menu_a2</</a> </li> 
      <li id="menu-a3" onclick="Menu('a3','click');" onmouseover="('a3','over');" onmouseout="Menu('a3','out');" > <a href="#">Menu_a3</</a> </li> 

     </ul> 

<div id=div_1></div> 
<div id=div_2></div> 
<div id=div_3></div> 
<div id=div_4></div> 

繼承人我的Java腳本：

function Menu(where, action) { 

switch (action) { 

    case 'click': 
     if ($('#menu-'+where).hasClass('active')) { 
      ClearMenu(); 
      $('#menu-'+where).removeClass('active');     
     } else { 
      $('#menu-'+where).addClass('active'); 
      ClearMenu(); 
      ActiveMenu(where); 
     } 
     break; 

    case 'over': 
     ActiveMenu(where); 
     OverMenu(where); 
     break; 

    case 'out': 
     ActiveMenu(where); 
     break; 


default: break; 
} 

} 

function ClearMenu(){ 
// Removing Classes 
$('#div_1').removeClass('a1 a2 a3'); 
$('#div_2').removeClass('a1 a2 a3'); 
$('#div_3').removeClass('a1 a2 a3'); 
$('#div_4').removeClass('a1 a2 a3'); 

function OverMenu(where){ 
$('#div_1').addClass(where); 
$('#div_2').addClass(where); 
} 

function ActiveMenu(where){ 
// Adding Classes 
$('#div_1').addClass(where); 
$('#div_2').addClass(where); 
$('#div_3').addClass(where); 
$('#div_4').addClass(where); 
} 

，這裏是我的CSS：

#div_1.a1 {background:url(background_div1_a1.jpg)} 
#div_1.a2 {background:url(background_div1_a2.jpg)} 
#div_1.a3 {background:url(background_div1_a3.jpg)} 


#div_2.a1 {background:url(background_div2_a1.jpg)} 
#div_2.a2 {background:url(background_div2_a2.jpg)} 
#div_2.a3 {background:url(background_div2_a3.jpg)} 


#div_3.a1 {background:url(background_div3_a1.jpg)} 
#div_3.a2 {background:url(background_div3_a2.jpg)} 
#div_3.a3 {background:url(background_div3_a3.jpg)} 


#div_4.a1 {background:url(background_div4_a1.jpg)} 
#div_4.a2 {background:url(background_div4_a2.jpg)} 
#div_4.a3 {background:url(background_div4_a3.jpg)} 

Answer 1

在你OverMenu功能，你得'where'用引號引起來，大概你想引用函數參數而不是字符串？擺脫這裏的引號。

而且，你的CSS是錯誤的：你不能只是給它一個文件名，並期望它知道該怎麼做，你必須設置background-image屬性：

#div_1.a1 { background-image: url(background_div1_a1.jpg); } 

此外，在onmouseover位在你的HTML中，你實際上並沒有調用函數。想必你想Menu在這裏。

更新：

我會爲此使用jQuery。我在jsFiddle上做了一個例子 - http://jsfiddle.net/GrahamClark/gLGUQ/4/ - 希望這足以讓你開始。