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

```