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”之前“预先清除”所有图像标签。请注意，这不是最有效的方法，但对于少量菜单项应该可以正常工作。