菜单：悬停、单击、类更改和 ajax

Question

最后最小化的代码是，我希望它能对某人有所帮助：

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

编辑：感谢您的回答，现在可以使用了。我添加了一个额外的类“selected”（它在CSS中没有任何内容）并相应地编写了代码。这是新代码。如何最小化>此代码？

这是： 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>

jQuery 是：

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

你好！我制作了一个菜单，在悬停时向每个 li 添加“active”类，并在悬停时删除 >class，但已经具有“active”类的 li 除外。 至此，这件事就完成了。然而，我在每个 li 上都有另一个 .click() ，它使用 ajax 将内容加载到 > 某处。问题从这里开始，当我单击时，我想将“active”类添加到单击的元素并从所有元素中删除类。我添加了该类，但是在单击之前具有 >class“active”的 li 在悬停时不会变为“active”，我认为“active”>class 没有从中删除？有人可以帮忙吗？

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

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

您应该考虑返回该代码段的绘图板。
首先，你不需要包装集上的 .each() ，因为 jQuery 已经
为你做这个。

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

就很好了。

要实现我猜你想要的，请使用如下代码：

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

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

Answer 2

如果您发布更简洁的问题就更好了。如果我理解你的问题，那是因为 $("#menu").... 函数在第一次加载页面时绑定到每个元素，并且当“blog”被设置为活动状态时页面加载时没有绑定到它的函数。尝试

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

在上面的第二个函数中，您可能需要另一个 if ，具体取决于您想要什么。