jQuery agregar clase a div mientras se quita de los demás

Question

Hola Estoy tratando de hacer una navegación construida desde DIV que utiliza la función jQuery AJAX para cargar páginas.

Lo que quiero es es cuando el usuario hace clic dicen en las páginas a continuación, Tablero de instrumentos o en qué página siempre activo que están en ha llamado activa clase eliminado y añadido a la nueva clic

<div class="dijit active" id="dijit_dashboard">Dashboard</div> 
<div class="dijit" id="dijit_pages">Pages</div> 

código de jQuery, que doesn No hago el trabajo.

$("#dijit_pages").click(function() { 
    $("#dijit_utm").load('index.html'); 
    $(this).addClass("active"); 
}); 

pero no estoy seguro de cómo eliminar class active de todos los demás.

Answer 1

$(function() { 
    $(".dijit").live("click", function() { 
     $(".dijit").removeClass("active"); // remove active class from all 
     $(this).addClass("active");   // add active class to clicked element 
     $("#dijit_utm").load('index.html'); 
    }); 
}); 

uso de este método significará la misma página se carga para cada enlace. Si necesita cargar una página por artículo, a continuación, el siguiente código será más apto:

HTML

<div class="dijit active" id="dijit_dashboard"><a href="dashboard.html">Dashboard</a></div> 
<div class="dijit" id="dijit_pages"><a href="pages.html">Pages</a></div> 

jQuery

$(function() { 
    $(".dijit").live("click", function(e) { 
     e.preventDefault(); 
     $(".dijit").removeClass("active"); // remove active class from all 
     $(this).addClass("active");   // add active class to clicked element 
     var href = $(this).find("A").attr("href"); 
     $("#dijit_utm").load(href); 
    }); 
}); 

---

ACTUALIZACIÓN

Esta vieja respuesta todavía parece tener puntos de vista muy estables, así que aquí tiene una respuesta actualizada utilizando los últimos métodos de jQuery como live() ha quedado obsoleto desde la versión 1.7:

$(document).on('click', '.dijit', function(e) { 
    e.preventDefault(); 
    var $el = $(this); 
    $el.addClass("active").siblings().removeClass('active'); 
    $("#dijit_utm").load($el.find('a').attr('href')); 
}); 

Answer 2

he añadido una línea a su código que encuentra todos los DIV elementos con la clase active y elimina esa clase:

$('#dijit_pages').click(function() 
{ 
    $('#dijit_utm').load('index.html'); 
    $('div.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

puede ser demasiado amplio para sus propósitos, sin embargo, si usted está utilizando el activo clase en lugares que no sean su menú. Si ese es el caso, desea restringir el alcance de búsqueda de elementos con la clase active.

Editar: Con su margen de beneficio añadido, que cambiaría a esto:

$(function() 
{ 
    var $dijitMenuItems = $('.digit'), 
     activeClass = 'active'; 

    $dijitMenuItems.click(function(e) 
    { 
    $('#dijit_utm').load('index.html'); //will need more info to determine how to find href to load 
    $dijitMenuItems.removeClass(activeClass); 
    $(this).addClass(activeClass); 

    e.preventDefault(); //most likely needed to stop any link-following from within the DIV 
    }); 
});