menu with: hover, click, class change and ajax
- by abdullah kahraman
Hello! I have made a menu that adds class "active" on hover to each li, and removes the class when hovered out, except on li s that has a class "active" already.
So far, this is done. However I have another .click() on every li that loads a content to somewhere with ajax. The problem starts here, when I click, I want to add class "active" to clicked element and remove class from all of them. I add the class, but the li that had class "active" before the click doesn't get "active" when hovered, I think the "active" class is not removed from it? Can anyone help?
<div id="menu">
<ul>
<li><a href="index.php" id="homeLink">home</a></li>
<li><a href="#">news</a></li>
<li><a id="test" href="#" class="active">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
<li><a href="contact.php" id="contactLink">contact</a></li>
<li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
</ul>
</div>
Here is the jquery:
$("#menu").find("a").not(".active").each(function(){
$(this).hover(function(){
alert($(this));
$(this).addClass("active");
},function(){
$(this).not(".clicking").removeClass("active");
});
});
$("#homeLink").click(function(){
var myThis=$(this);
$("#ajaxP").fadeIn("slow");
$("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
$("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
$("#ajaxP").fadeOut("normal");
$("#menu").find("a").each(function(){
$(this).unbind('mouseover').unbind("mouseout");
$(this).removeClass("active clicking");
});
myThis.addClass("active clicking");
return false;
});
