jquery hasClass "active" on ul#navigation li on page load not working

Question

$(document).ready(function(){

$("li").click(function(){

    if ($(this).hasClass("active") )

          $(this).fadeTo("slow", 1.0); 

    });
});

I have a navigation bar made and am using this code to add a transparency effect on hover:

$(document).ready(function(){
 $(".thumbs").fadeTo("slow", 0.6); 

 $(".thumbs").hover(function(){

    $(this).fadeTo("slow", 1.0); 

    },function(){

    $(this).fadeTo("slow", 0.4); 

    });

});

I'm also using hoverIntent.

The opacity rollover works a treat, but I'd like my "active" page to have 100% opacity, but I can't seem to get it to work..what am I doing wrong?

the link in questions HTML is:

<ul id="navigation">
  <li class="active"><a href="page.htm"></a></li>
</ul>

the nav works perfect minus my "active" class so I think I provided all the necessary code. thank you.

Answer 1

I was able to achieve a solution with a little php but I'm sure it could have been achieved with Jquery if I was able to explain sufficiently.

thanks anyways!

Answer 2

You don't need the hasClass test. You can replace...

$("li").click(function(){
    if ($(this).hasClass("active") )
          $(this).fadeTo("slow", 1.0); 
    });
});

with this.....

$("li.active").click(function(){
    $(this).fadeTo("slow", 1.0); 
});

Answer 3

Instead of .click(), you probably want .each() here, but you can do it even simpler than that :)

On your page load you can just do this using the :not() selector:

$("li:not(.active)").fadeTo("slow", 0.6);

This will only fade out the <li> which don't have class="active"