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

您好，我正在尝试创建一个由DIV构建的导航，它使用jqueryajax函数加载页面

我想说的是，当用户在页面上单击时，Dashboard或他们所在的任何活动页面都会将名为active的类删除并添加到新的单击页面中

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

---

但我不知道如何从所有其他类中删除活动类。

我在代码中添加了一行，该行将查找具有

活动类的所有
DIV
元素，并删除该类：

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

但是，如果您在菜单之外的其他位置使用活动类，那么它可能太宽了。如果是这种情况，您希望缩小对class
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
  } );
} );

使用此方法将意味着为每个链接加载相同的页面。如果您需要为每个项目加载一个页面，那么以下代码将更合适：



$（函数（）{
$（“.dijit”）.live（“单击”），函数（e）{
e、 预防默认值（）；
$（“.dijit”）.removeClass（“active”）；//从所有
$（this）.addClass（“active”）；//将活动类添加到单击的元素
var href=$（this.find（“A”）.attr（“href”）；
$（“#dijit_utm”）.load（href）；
});
});


更新

这一旧答案似乎仍然获得了相当稳定的视图，因此这里有一个使用最新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'));
});

我可以尝试使用变量来提取数据。我正在使用WordPress网站上更新的答案来启动一些CSS动画。但是，我需要向该代码中添加什么才能单击活动div并从中删除该类？可能是
$（document）。on（'click'，'active'，'e=>$（e.target.）。removeClass（'active'）但这只是一个猜测，没有看到您的代码。如果你有问题，我建议你开始自己的问题，包括所有相关的代码。谢谢Rory，我用我的代码发布了一个新问题，希望这是一个简单的答案！是的！只需将addClass更改为toggleClass，就可以更早地解决这个问题！
$(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'); 
    });
});

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