jQuery: прекращение появления / исчезновения навигационного изображения на изображении текущей страницы - PullRequest
Новая
       14

jQuery: прекращение появления / исчезновения навигационного изображения на изображении текущей страницы

0 голосов
/ 01 ноября 2011

У меня есть сайт, который использует изображения для своей навигации. Код постепенного увеличения / уменьшения jQuery работает прекрасно - когда вы наводите курсор мыши на навигационные изображения, они переходят от оттенков серого к цвету. Это прекрасно работает, за исключением того, что нам нужно, чтобы изображение текущей страницы оставалось в подсвеченном / цветном состоянии. Я не могу заставить эту деталь работать должным образом. 

        <script type="text/javascript"><!--http://jqueryfordesigners.com/image-cross-fade-transition/-->
    // make nav images highlight on hover
    // when the DOM is ready:
    $(document).ready(function () {
       // find the navigation elements and hook the hover event
       $('#mainmenu li').hover(function() {
          // on hovering over, find the element we want to fade *up*
          var fade = $('> div', this);

          // if the element is currently being animated (to a fadeOut)...
          if (fade.is(':animated')) {
            // ...take it's current opacity back up to 1
            fade.stop().fadeTo(250, 1);
          } else {
            // fade in quickly
            fade.fadeIn(250);
          }
    }, function () {
          // on hovering out, fade the element out
        if (!$(this).hasClass('active')){  
        var fade = $('> div', this);
            if (fade.is(':animated')) {
                fade.stop().fadeTo(3000, 0);
            } else {
            // fade away slowly
            fade.fadeOut(2000);
        }
        }
     });
});
</script>

<script type="text/javascript">
    // when the DOM is ready:
    $(document).ready(function () {
        //Toggle Class on Click
        $("#mainmenu li").click(function() {
            //remove active class from any navigation li
            $('#mainmenu li:active').removeClass(function() {
                    return $(this).prev().attr('class');
                });
                            //change class of the clicked nav li                
            $(this).addClass("active");
        });
    });
    </script>



    <ul id="mainmenu">
        <li id="home">
            <a href="/home">Home<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
            <div>
                <a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
            </div>  
        </li>

        <li id="about">
            <a href="/about">About<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/david_inactive.png" alt="about" width="152" height="309" /></a>    
            <div>
                <a href="/about"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/david_active.png" alt="home" width="152" height="309" /></a>
            </div>                      
        </li>
        <li id="store">
            <a href="/store">Store<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/canyon_inactive.png" alt="" width="152" height="309" /></a>
            <div>
                <a href="/store"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/canyon_active.png" alt="home" width="152" height="309" /></a>
            </div>                          
        </li>
        <li id="information"><a href="/information">Information
            <img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wading_inactive.png" alt="" width="152" height="309" /></a>
            <div>
                <a href="/information"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wading_active.png" alt="home" width="152" height="309" /></a>
            </div>                          
        </li>
        <li id="contact"><a href="/contact">Contact
            <img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wall_inactive.png" alt="" width="152" height="309" /></a>
            <div>
                <a href="/contact"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wall_active.png" alt="home" width="152" height="309" /></a>
            </div>                          
        </li>
    </ul>

    </div><!-- #access -->

1 Ответ

0 голосов
/ 01 ноября 2011

Вы уверены, что "активный" класс все еще существует после перезагрузки страницы?

Вы устанавливаете класс на стороне клиента, но вы также должны сделать это на стороне сервера, чтобы он был там после перезагрузки страницы.

...