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

我比其他人稍微改变了一点，但这是一个工作示例。

小提琴

首先，我更新了点击逻辑以使用 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 调用（因为它在小提琴中不起作用）

Answer 2

如果您只想使用 HTML 和 CSS 来实现，您可以使用隐藏的单选按钮来实现此目的。

小提琴

HTML

<label class="sort" onchange="alert('Sorting by: date')">
    <input type="radio" name="sort" value="date" checked />
    <span>Date Modified</span>
</label>

CSS

.sort > input[type=radio] {
    display: none;   
}

.sort {
    cursor: pointer;
}

.sort > input[type=radio]:checked + span {
    color: red;
}

Answer 3

用这个

a {
color: #0077CC;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #0077CC !important;
}
a:visited {
color: #4A6B82;
}
a:active {
color: #6BAC28;
font-weight: bold;
text-decoration: underline;
}