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” “进入”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调用将#content-linkwrap img内的所有图像标记设置为“关闭”阶段的功能，然后修改所选src属性img 1}}标签让它显示“on”图像文件名。

在将其中一个设置为“on”之前，我基本上是“预清除”所有图像标签。请注意，这不是最有效的方法，但它适用于少量菜单项。

选中时jquery更改图像菜单

1 个答案: