菜单包含：悬停、单击、类更改和 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，并在悬停时删除 >class，除了已经有一个类“活动”的 li s。 到目前为止，这已经完成。但是，我在每个 li 上都有另一个 .click() ，它使用 ajax 将内容加载到 > 某处。问题从这里开始，当我单击时，我想将类“活动”> 添加到单击的元素并从所有元素中删除类。我添加了类，但是在单击之前具有 >class “活动”的 li 在悬停时没有变得“活动”，我认为“活动” > 类没有从中删除？有人可以帮忙吗？

    <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").... 函数在第一次加载页面时绑定到每个元素，并且当页面加载时“博客”设置为活动状态，它没有绑定到它的函数。试试

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

在上面的第二个函数中，你可能需要另一个 if，这取决于你到底想要什么。