Question

您好我想知道如何更改点击链接的类别？

这是我的HTML：

    <div id="category_list" class="list-group">
        <a href="#" data_category="all_apps" class="list-group-item active">
            <span class="badge">2</span>All applications</a>
                <a href="#" data_category="New1" class="list-group-item">
            <span class="badge">1</span>
                        New1
                    </a>          
                <a href="#" data_category="new2" class="list-group-item">
            <span class="badge">1</span>
                        new2
                    </a>          
                <a href="#" data_category="new4" class="list-group-item">
            <span class="badge">1</span>
                        new4
                    </a>          

    </div>

我想要做的是为当前选中设置类 list-group-item active以及其他人list-group-item

这是我的jquery，但它不起作用：

$("#category_list a").click(function(e) {
    var link = $(this);
    $('#category_list a').each(function(e) {
        if ($(this) == link) {
            alert($(this).text());
            $(this).addClass('list-group-item active').removeClass('list-group-item');
        }
        else {
            $(this).addClass('list-group-item').removeClass('list-group-item active');
        }
    });
    e.preventDefault();
});

Answer 1

active是您要添加/删除的类，因此您只需将其从所有链接中删除，然后将其添加到点击的链接中：

$("#category_list a").click(function(e) {
   $("#category_list a").removeClass('active');
   $(this).addClass('active');
   e.preventDefault();
});

示例 - http://jsfiddle.net/infernalbadger/UNMY7/

Answer 2

您可以按如下方式简化代码：

$('#category_list a').on('click', function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings('a').removeClass('active');
});

jsFiddle Demo

Answer 3

您可以使用.not()排除选择器中的点击链接

$("#category_list a").click(function(e) {
    $("#category_list a")
        .not(this) //Exclude current element
        .removeClass('active');

    //Add class with clicked link
    $(this).addClass('active');

    e.preventDefault();
});

Jquery如何更改点击链接的类

3 个答案: