jQuery将div添加到div，同时从其他人​​中删除它

Question

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

我想要的是当用户点击“页面”，然后是“仪表板”或者他们所处的活动页面时，将其称为“活动”已删除并添加到新单击的

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

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

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

---

<强>更新

这个旧答案似乎仍然得到了相当稳定的观点，所以这里是使用最新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
  } );
} );