與菜單：懸停，點擊，一流的變化和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; 
}); 

編輯：謝謝你的答案，它現在的工作。我添加了一個額外的類「選擇」（其中>沒有在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「active」，並且在懸停時刪除> class，除了已經有一個「active」類的li。 到目前爲止，這已完成。然而，我有另一個.click（）每一個加載內容到一個Ajax的地方。問題從這裏開始，當我點擊時，我想添加類「active」>單擊元素並從其中刪除類。我添加了這個類，但是在點擊之前有>「活動」類的li沒有被「激活」，我認爲「active」>類不會被刪除嗎？誰能幫忙？

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

如果上面的第二個功能，您可能需要另一個，這取決於它究竟是什麼你想要的。