menu with: hover, click, class change and ajax

Question

The last minimized code is, I hope it will help someone:

    $("#menu").find("a").hover(function(){
    $(this).addClass("active");
},function(){
    $(this).not(".clicking").not(".selected").removeClass("active");
});
$("#menu").find("a").click(function(){
    var $this = $(this);
    $("#ajaxP").fadeIn("fast");
    $("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
        $("#normalcontent").slideDown("slow");
    });
    $("#primarycontainer").hide("fast").load($this.attr("href") +" #primarycontainer","",function(){
        $("#primarycontainer").slideDown("slow");
        $("#ajaxP").fadeOut("fast");
    })
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});

Edit: Thanks for the answers, it is working now. I added an extra class "selected"(which >has nothing in css) and written code accordingly. Here is the new code. How can I minimize >this code?

Here it is: http://cebrax.freesitespace.net/new/

    <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 selected">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>

And jQuery is:

$("#menu").find("a").hover(function(){
    $(this).addClass("active");
},function(){
    $(this).not(".clicking").not(".selected").removeClass("active");
});
$('#homeLink').click(function(){
    var $this = $(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");
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});
$('#contactLink').click(function(){
    var $this = $(this);
    $("#ajaxP").fadeIn("slow");
    $("#normalcontent").hide("slow").load("contact.php #normalcontent").slideDown("slow");
    $("#primarycontainer").hide("slow").load("contact.php #primarycontainer").slideDown("slow");
    $("#ajaxP").fadeOut("normal");
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});

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;
 });

Answer 1

You should consider to go back to the drawing board for that piece of code. First of all, you don't need the .each() on wrapped sets, since jQuery already does this for you.

$("#menu").find("a").not(".active").hover(...);

is just fine.

To achive what I guess you want, use code like this:

$('#menu').find('a').bind('click', function(){
   var $this = $(this);

   $this.closest('ul').find('a').removeClass('active');
   $this.addClass('active');       
});

Answer 2

It's better if you post more concise questions. If I've understood your question it's because the $("#menu").... function get bound to each element the first time the page is loaded and as "blog" is set active when the page loads it doesn't get the function bound to it. Try

$("#menu").find("a").each(function(){
$(this).hover(function(){
    if (!($(this).hasClass("selected")){
        alert($(this));
        $(this).addClass("active");
    }
},function(){
   $(this).not(".clicking").removeClass("active");
});
});

You may need another if on the second function above, depending on what it is exactly you want.