jquery - 如何更改事件链接标签的颜色

Question

以下是链接选项卡的代码，

HTML

<div class="sortLinks right">
    <label>Sort by</label>
    <a onclick="javascript:SortOrder('DATE')" href="#">Date Modified</a>
    <span class="sort_sep">&nbsp;</span>
    <a onclick="javascript:SortOrder('ALPHA')" href="#">Alphabetical</a>
</div>

CSS

a:focus
{
    color:Blue;    
}

JQuery

function SortOrder(order) {
    $.ajax({
        type: "POST",
        cache: false,
        url: "@Url.Action("SecondarySkillDetails", "SkillLifeCycle")",
        data: { primarySkillID: $("#ddlPrimarySkills").val(), sortorder: order },
        success: function (data) {
            $("#content").html(data);
        },
        error: function (xhr, textStatus, error) {
           alert (error);
        }
    });
}

我想以蓝色突出显示事件链接。在选择链接时，它会以蓝色突出显示，一旦我点击外部，它就会再次变为黑色。我该如何避免这种情况？

Answer 1

我对它进行了比其他人更多的更改，但这是一个有效的示例。

Fiddle

首先，我更新了点击逻辑以使用 on，然后使用 on 将类 active 添加到事件选择。

 $(document).ready(function(){
    $('.sortLinks').on('click','a',function() {
        $('.sortLinks a').removeClass("active");
        var clazz = $(this).attr('class');
        $(this).addClass('active');
        SortOrder(clazz);
    });
});

请注意，在示例中我注释掉了您的 ajax 调用(因为它在 fiddle 中不起作用)