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 "

Это возможно?

Заранее спасибо

Тирсо

вот мое 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 для его отображения имя файла изображения "on".

Я, по сути, "предварительно очищаю" все теги изображений перед тем, как установить один из них в положение "включено". Обратите внимание, что это не самый эффективный подход, но он должен хорошо работать для небольшого количества пунктов меню.