如何更改活動鏈接標籤

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

首先我更新到使用上，然後使用到類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

使用此

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

Answer 3

僅使用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; 
}