jQuery dodaj klasę do div, usuwając ją od innych

Question

Witam Próbuję stworzyć nawigację zbudowaną z DIV, która używa funkcji jQuery AJAX do ładowania stron.

Rzecz Chcę to jest wtedy, gdy użytkownik kliknie powiedzieć na stronach następnie Dashboard lub co kiedykolwiek aktywny strona oni są na ma klasy o nazwie aktywny usuwane i dodawane do nowego kliknął jedną

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

kodu jQuery, który nie robi nie wykonuję tej pracy.

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

ale nie jestem pewien, jak usunąć klasę aktywną ze wszystkich innych.

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

Korzystając z tej metody będzie oznaczać ta sama strona jest ładowana za każdym ogniwie. Jeśli trzeba załadować stronę za sztukę, to poniższy kod będzie bardziej apt:

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

---

UPDATE

Ten stary odpowiedź nadal wydaje się dość stabilny poglądy, tak oto zaktualizowaną odpowiedź przy użyciu najnowszych metod jQuery jako live() został przestarzałe od wersji 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 dodaje wiersz do kodu, który wyszukuje wszystkie DIV elementy z klasy active i usuwa ten Klasa:

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

może być zbyt szeroki dla swoich celów, chociaż, jeśli używasz aktywnej klasy w miejscach innych niż twoje menu. Jeśli tak jest, chcesz zawęzić zakres miejsca wyboru elementów z klasami wyszukiwania klasy active.

Edit: Z Twoich dodatkowych znaczników, chciałbym zmienić to:

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