Toggle clase activa en la barra de navegación con 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> 

así que quería unirse a click de cada una de estas identificaciones, y establece class="active" en la que se ha hecho clic, y eliminarlo de todos los demás.

Puedo hacer la primera parte, pero ¿cómo puedo hacer esto último?

Answer 1

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

Sería prudente dar clases significativas para los <li> 's para que pueda seleccionar adecuadamente sólo a aquellos, pero usted consigue la idea.

Answer 2

Proporcione al ul una identificación o clase, y seleccione fuera de ella.

<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

Usted puede hacer:

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

    }); 
}); 

violín aquí http://jsfiddle.net/UVyKe/1/

Answer 5

No hay necesidad de enlazar un evento de clic a cada ID, pero en lugar de obligar a todos los elementos de la lista de esta lista desordenada. Luego use los métodos .parent(). Children(). Siguiente debe funcionar:

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

Answer 6

Es probable que encuentres esto mejor (de lo contrario la página saltará) -

$(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

Puede agregar la clase activa mediante el siguiente sola línea sin necesidad de utilizar cualquier caso

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

link to refer