JQuery選擇性選擇

Question

我有一些動態菜單。一旦有人點擊鏈接進入菜單，我想突出顯示這個點擊菜單。

$("#my_menu > li").click(function(){ 
    var clickedId = $(this).attr('id'); 
    $("#" + clickedId).css("font-weight", "bold"); 
    $("#" + clickedId).css("background-color", "#E0E0E0"); 
    $('#navigation_submenu').show(); //this is not important 
}); 

但現在我必須恢復到其他菜單的初始狀態。 請有人可以幫助我如何做到這一點？ 感謝

Answer 1

更好的方式來做到這一點是使用addClass()和removeClass()這樣：

• 首先在你的CSS創建活動項目類：

  .active { 
      font-weight:bold; 
      background-color:#E0E0E0; 
  } 
  

• 然後用jQuery ：

  $("#my_menu > li").click(function(){ 
      //Remove previous active item 
      $("#my_menu > li").removeClass('active'); 
      //Add class on clicked element 
      $(this).addClass('active') 
  }); 
  

選中此Demo Fiddle

Answer 2

像這樣的事情？

CSS

li.active 
{ 
    font-weight: bold; 
    background-color: #E0E0E0; 
} 

的JavaScript

$("#my_menu > li").on("click", function() 
{ 
    $("#my_menu > li").removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 3

使用CSS類爲 「主動」 來代替。

$('.active').removeClass('active'); 
$(this).addClass('active'); 

而你當然需要一個CSS類的規範，你的大膽和更多。

編輯：Oups，我太慢了。其他人給了你幾乎相同的答案。