Question

我有一个使用图片进行导航的网站。 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 -->

Answer 1

重新加载页面后，您确定“活动”类仍然存在吗？

你设置了客户端类，但你也必须在服务器端执行它，以便在页面重新加载后它就在那里。

jQuery：暂停当前页面图像上的导航图像淡入/淡出

1 个答案: