javascript jquery访问被点击的元素

Question

我已经使用javascript加载了以下semibuttons列表：

        var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';

        html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
        var users = this.my.community_users;
        for (i=0;i<users.length;i++) {
            if (users[i].user != this.my.user)
            html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
        };
        html +='</ul>';
        $(html).appendTo("#Dashboard");

请注意，列表中的第一项是有效的。我得到这样的东西：

好的，现在我编码onclick事件来点击按钮时做某事：

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
      // whatever here
});

我现在需要的是设置活动单击的选项卡，并将活动的选项卡设置为非活动状态。如何访问addclass和removeclass两个元素？

Answer 1

您可以使用以下逻辑：

$(document).on('click', '#users li:not(.active)', function () {
    $('#users').find('li.active').add(this).toggleClass('active');
});

Answer 2

这样的事可能有用。基本上从除了你点击的元素之外的所有内容中删除.active类。将.active类添加到单击的元素中。

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
    $('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
    $(this).addClass('active');
});

Answer 3

我会删除“活跃的”＃39;首先列出所有列表项中的类，然后将其添加回唯一被单击的项。

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
    $('#users .active').removeClass('active');
    $(this).addClass('active');
});