jQuery導航欄

Question

我有一個側面導航欄，它使用jQuery將隱藏的div移動到屏幕上。我希望側欄上的每個<li>在點擊時獲得活動課程。

我試圖讓它對<li>點擊說給活動類的<li>，然後在下一個<li>的點擊清除活性類，並自動給它下一個點擊<li>。

我目前的方法不能很好地工作。以下是我的HTML和腳本：

<ul> 
    <li id="overview" class="selector"><a href="#">OVERVIEW</a></li> 
    <li id="whyus" class="selector"><a href="#">WHY US</a></li> 
</ul> 

<script> 
jQuery("#overviewHidden").fadeIn(); 
jQuery("li#overview").addClass('active'); 

jQuery("#overview").click(function() { 
    jQuery('ul li.active').removeClass('active'); 
    jQuery("li#overview").addClass('active'); 
    jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide(); 
    jQuery('#overviewHidden').slideDown(); 
}); 

jQuery("#whyus").click(function() { 
    jQuery('ul li.active').removeClass('active'); 
    jQuery("li#whyus").addClass('active'); 
    jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide(); 
    jQuery('#whyusHidden').slideDown(); 
}); 
</script> 

任何幫助將是偉大的。謝謝！

Answer 1

嘗試這樣：

var activeitem; 

$(document).ready(function() { 
    var items = $("li"); 
    for (var i = 0; i < items.length; i++) { 
    items[i].onclick = function() { 
     if (activeitem) { 
     activeitem.removeClass("active"); 
     } 
     activeitem = $(this); 
     activeitem.addClass("active"); 
    }; 
    } 
}); 

Answer 2

jQuery("li.selector").click(function() { 
    $(this).addClass('active'); 
    $(this).siblings().removeClass('active'); 
});