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

编辑：感谢您的回答，现在正在运作。我添加了一个额外的“选定”类（在css中没有任何内容）和相应的编写代码。这是新代码。如何最小化＆gt;此代码？

这是：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时添加“活动”类，并在外出时删除＆gt;类，除了已经具有“活动”类的li。到目前为止，这已经完成了。但是我在每个li上都有另一个.click（），它将内容加载到某个地方，并带有ajax。问题从这里开始，当我点击时，我想添加类“active”＆gt;来点击元素并从所有这些中删除类。我添加了这个类，但是在点击之前具有＆gt;类“活动”的li在悬停时没有“活动”，我认为“活动”＆gt;类是不是从它中删除了？有人可以帮忙吗？

    <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

你应该考虑回到那段代码的绘图板。首先，由于jQuery已经存在，因此在包装集上不需要.each() 为你做这件事。

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

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

菜单：悬停，点击，类更改和ajax

2 个答案: