avec: hover, cliquez sur, changement de classe et ajax

Question

Le dernier code est réduite au minimum, j'espère que cela va aider quelqu'un:

$("#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: Merci pour les réponses, il travaille actuellement. J'ai ajouté une classe supplémentaire "selected" (qui n'a rien en css) et du code écrit en conséquence. Voici le nouveau code. Comment puis-je minimiser> ce code?

Ici, il est: 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> 

Et jQuery est:

$("#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; 
}); 

Bonjour! J'ai fait un menu qui ajoute la classe "active" sur hover à chaque li, et supprime la classe> quand survolé, sauf sur li s qui a déjà une classe "active". Jusqu'ici, c'est fait. Cependant, j'ai un autre .click() sur chaque li qui charge un contenu vers quelque part avec ajax. Le problème commence ici, quand je clique, je veux ajouter la classe "active"> à l'élément cliqué et enlever la classe de chacun d'eux. J'ajoute la classe, mais le li qui avait> class "active" avant que le clic ne soit pas "actif" en survol, je pense que la classe "active"> n'en est pas retirée? Quelqu'un peut-il aider?

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

Voici le 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

Vous devriez envisager de revenir à la planche à dessin pour ce morceau de code. Tout d'abord, vous n'avez pas besoin de l'.each() sur les ensembles emballés, puisque jQuery déjà le fait pour vous.

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

est très bien.

Pour ACHIVE ce que je suppose que vous voulez, utilisez le code comme ceci:

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

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

Answer 2

Il est préférable si vous posez des questions plus concis. Si j'ai compris votre question, c'est parce que la fonction $("#menu").... est liée à chaque élément la première fois que la page est chargée et que "blog" est activé lorsque la page se charge, elle ne reçoit pas la fonction liée. Essayez

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

Vous pouvez avoir besoin d'un autre si vous utilisez la deuxième fonction ci-dessus, en fonction de ce que vous voulez exactement.