jQuery add class to div while removing it from others

Question

Hello I am trying to make a navigation constructed from DIV's which uses jQuery AJAX function to load pages.

The thing I want to is is when user clicks say on Pages then Dashboard or what ever active page they are on has class called active removed and added to the new clicked one

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

jQuery code which doesn't quite do the work.

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

but I am not sure how to remove class active from all others.

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'); 
    });
});

Using this method will mean the same page is loaded for each link. If you need to load a page per item, then the following code will be more apt:

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

$(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);
    });
});

---

UPDATE

This old answer still seems to get quite steady views, so here's an updated answer using the latest jQuery methods as live() has been deprecated since version 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

I added a line to your code which finds all DIV elements with the active class and removes that class:

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

It may be too broad for your purposes, though, if you're using the active class in places other than your menu. If that's that case, you want to narrow the scope of where the selction for elements with class active searches.

Edit: With your added markup, I would change to this:

$( 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
  } );
} );