jquery更改圖像菜單選擇時

Question

我有導航菜單使用圖像，我希望如果用戶單擊菜單，然後更改圖像。假設我的圖片菜單是「about-us-our-mission.jpg」，那麼一旦用戶點擊此按鈕，它將變成「about-us-our-mission-roll.jpg」，所以如果用戶點擊另一個按鈕像「about-us-our-pride.jpg」那麼它應該變成「about-us-our-pride-roll.jpg」，並將另一個按鈕放回到先前的圖像中，例如「about-us-our-mission-roll.jpg 「into」about-us-our-mission.jpg「

有可能嗎？

在此先感謝

Tirso的

這裏是我的HTML菜單

 <ul class="about-nav" id="content-linkwrap"> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-mission','','<? echo base_url() ?>images/about-us-our-mission-roll.jpg',1)" class="hrefmenu" id="mission-href"><img src="<?php echo base_url() ?>images/about-us-our-mission.jpg" id="our-mission"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-pride','','<? echo base_url() ?>images/about-us-our-pride-roll.jpg',1)" class="hrefmenu" id="pride-href"><img src="<?php echo base_url() ?>images/about-us-our-pride.jpg" id="our-pride"/></a></li>  
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-business','','<? echo base_url() ?>images/about-us-our-philosopy-roll.jpg',1)" class="hrefmenu" id="business-href"><img src="<?php echo base_url() ?>images/about-us-our-philosopy.jpg" id="our-business"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-family','','<? echo base_url() ?>images/about-us-our-family-roll.jpg',1)" class="hrefmenu" id="family-href"><img src="<?php echo base_url() ?>images/about-us-our-family.jpg" id="our-family"/></a></li> 
      <li><a href="javascript:void(0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our-profile','','<? echo base_url() ?>images/about-us-our-profile-roll.jpg',1)" class="hrefmenu" id="profile-href"><img src="<?php echo base_url() ?>images/about-us-our-profile.jpg" id="our-profile"/></a></li>                
     </ul> 

這裏是我的JavaScript這將改變內容

$("#content-linkwrap .hrefmenu").click(function(){ 

    $clicked = $(this); 
    // if the button is not already "transformed" AND is not animated 

     // each button div MUST have a "xx-button" and the target div must have an id "xx" 
     var idToLoad = $clicked.attr("id").split('-'); 

     //var img = $(this).parent().find("#our-"+idToLoad[0]).attr("src");  
     //we search trough the content for the visible div and we fade it out 
     $("#description").children().filter(":visible").fadeOut("fast", function(){ 
      //once the fade out is completed, we start to fade in the right div 
      $(this).parent().find("#"+idToLoad[0]).fadeIn(); 
     }) 
}); 

Answer 1

是的，這是可能的。

我會寫這個選擇器的事件處理程序：#content-linkwrap img。請注意，我不打擾指定類.hrefmenu，因爲它看起來像#content-linkwrap無序列表中的所有錨定標記處理相同。然後

事件處理程序將使用選擇#content-linkwrap img呼叫功能，設置的#content-linkwrap內的所有圖像標記爲「off」的階段，然後修改所選擇的img標籤的src屬性有它顯示「上」圖像文件名。

我基本上是在將其中的一個設置爲「on」之前「預先清除」所有圖像標籤。請注意，這不是最有效的方法，但對於少量菜單項應該可以正常工作。