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

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

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

如何更改活动链接标记的颜色

3 个答案: