如何从jquery中删除元素集中的活动类

时间:2014-01-23 20:19:05

标签: jquery

我遇到添加活动元素和删除onclick操作的问题。 我正在巧妙地从cms带来li和一些物品,在HTML中它有点像这样:

<li class="arrow-right text-center">Lorem Ipsum</li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>

我正在设置jQuery的第一个元素并尝试通过.click函数删除它,在我点击后我点击第一个并且点击元素仅激活刷新,页面刷新后只有第一个元素处于活动状态 样本:

$(".list-group-item:first").addClass("active");
$(document).ready(function(){
    $(".list-group-item:first").addClass("active");
    $('.list-group-item').click(function() {
        $(".list-group-item:first").removeClass("active");
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
});

我100%确定问题是第一行代码,因为它总是重复使用document.ready函数。我问,因为我不是专家,不知道如何检查第一个元素是否处于活动状态以及如何在我点击几次后返回到li元素后使其处于活动状态。

我试过

$(".list-group-item").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});

它不能正常工作

2 个答案:

答案 0 :(得分:1)

当您点击该链接时,如果该标签恰好是同一页面,则该页面将重定向到该标签的href url,然后执行相同的代码,使相同的li处于活动状态。您将要取消触发事件或更改呈现给客户端的html页面。

  

如何在点击几下后回到那个li元素后让它变为活动状态。

听起来你可能想要使用像HTML 5历史这样的东西来做深度链接,特别是如果你要使用href和重定向。如果是这种情况,您应该查看一些jquery历史插件,如jquery history pluginhistoryjQuery BBQ如果你想要做的就是将活动类更改为最新点击的li元素我会这样做。

$(document).ready(function(){
    $('li:first').addClass('active');
    $('li').click(function() {
        $("li.active").removeClass("active");
        $(this).addClass('active');
    });
});

由于问题中的html没有任何list-group-item类,我建议使用$('li')的jquery选择器,但如果li元素有list-group-item类,则可以使用

    $('li.list-group-item').click(function() {
        $("li.active").removeClass("active");
        $(this).addClass('active');
    });

$('.list-group-item').click(function() {
    $("li.active").removeClass("active");
    $(this).addClass('active');
});

代替。

答案 1 :(得分:0)

我在选择器下面使用添加和删除

$(document).ready(function () {
    $("[name='Status']").css("display", "none");  //==> find by name
    $("label[for='Status']").css("display", "none"); //==> find by for
});

$("#f1").bind("click", (function () {
    $(".select-airport").removeClass("active"); //==> remove by class name
    $(this).children('a').addClass('active'); //==> add to children
    $('#Status').val(1);
    $("#Status").trigger("change");

    }));

在右上方,我经常在jquery中需要这些东西并想要共享