Question

I have a site that uses images for its navigation. The jQuery fade-in/out code works beautifully – as you mouse over the navigation images they fade from greyscale to color. That works great, except that we need the current page nav image to remain in its highlighted/colored state. I can’t seem to get that part to work properly.

        <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

Are you sure the “active” class is still there after the page is reloaded?

You set the class client-side, but you also have to do it server side so it’ll be there after the page reload.