如何更改活动链接标签的颜色答案

【问题标题】：How to Change the color of an active link tag如何更改活动链接标签的颜色
【发布时间】：2013-11-04 10:50:55
【问题描述】：

以下是链接标签的代码，

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);
        }
    });
}

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

【问题讨论】：

您可以使用此 a:visited{} 来突出显示活动链接

标签： jquery css

【解决方案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 调用（因为它在小提琴中不起作用）

【讨论】：

【解决方案2】：

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

Fiddle

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;
}

【讨论】：

聪明我喜欢它，虽然技术上alert();是javascript
啊，是的，我只是将它添加为一个指针，如果需要额外的 javascript，我可以如何扩展它（我假设需要这样做以进行实际排序）:)

【解决方案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;
}

【讨论】：