jQuery将类添加到div，同时将其从div中移除

Question

您好，我正在尝试使用使用jQuery AJAX函数加载页面的DIV构建导航。

我想是的事情是，当用户点击页面且说仪表板或什么都活动页面，他们都在呼吁积极类中删除，并添加到其没有按新点击一个

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

jQuery代码做的工作不太好。

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

但我不确定如何从其他人中删除班级活动。

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

使用这种方法将意味着在同一个页面加载的每个环节。如果您需要加载每个项目的网页，然后将下面的代码会更加容易：

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

这个古老的答案似乎仍得到相当稳定的看法，所以这里采用了最新的jQuery方法更新的答案live()已经从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

我添加了一行到你的代码，找出所有DIV元素与active类，并删除类：

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

这可能是你的目的过于宽泛，不过，如果你使用的有源在你的菜单以外的地方上课。如果是这种情况，您希望缩小active类搜索元素的选择范围。

编辑：帮助将附加的标记，我就改成这样：

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