Przełącz aktywny klasa w pasku nawigacyjnym z jQuery

Question

<ul> 
       <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li> 
       <li id="tabCMDS" ><a href="@Href("~/CMDS")">CMDS</a></li> 
       <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li> 
       <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li> 
      </ul> 

Więc chciałem wiązać click każdego z tych identyfikatorów i ustaw class="active" na ten, który został kliknięty, i usunąć go od wszystkich innych.

Potrafię wykonać pierwszą część, ale jak mogę to zrobić?

Answer 1

$(function() { 
    $("li").click(function() { 
     // remove classes from all 
     $("li").removeClass("active"); 
     // add class to the one we clicked 
     $(this).addClass("active"); 
    }); 
}); 

To byłoby mądre, aby dać sensowne zajęcia do <li> jest tak właściwie można wybrać tylko te, ale masz pomysł.

Answer 2

Podaj ul id lub klasę i wybierz z niej.

<ul id = "nav">... 

var $navItems = $('#nav > li'); 
$navItems.click(function(){ 
    $navItems.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

$("ul li").click(function() 
{ 
$("ul .active").removeClass("active"); 
$(this).addClass("active"); 
}); 

Answer 4

można zrobić:

$('li').click(function(e){ 
    e.preventDefault(); 
    $(this).addClass('active'); 
    $(this).siblings().each(function(){ 
     $(this).removeClass('active') ; 

    }); 
}); 

skrzypce tutaj http://jsfiddle.net/UVyKe/1/

Answer 5

Nie trzeba powiązać zdarzenie click do każdego identyfikatora lecz wiążą się z wszystkich elementów listy tej liście nieuporządkowanej. Następnie użyj metod .parent(). Children(). Następujące powinny działać:

$('ul li').click(function(){ 
    $(this).addClass('active'); 
    $(this).parent().children('li').not(this).removeClass('active'); 
}); 

Answer 6

Prawdopodobnie okaże się to lepiej (w przeciwnym razie strona będzie skakać) -

$(function() { 
$("li").click(function() { 
    // remove classes from all 
    $("li").removeClass("active"); 
    // add class to the one we clicked 
    $(this).addClass("active"); 
    // stop the page from jumping to the top 
    return false; 
}); 
}); 

Answer 7

Możesz dodać aktywną klasę używając poniżej jednej linii bez użycia jakiegokolwiek zdarzenia

$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 

link to refer