如何更改活动链接标记的颜色 [英] How to Change the color of an active link tag

问题描述

以下是链接标签的代码，

HTML

 < div class =sortLinks right> 
< label>排序方式< / label> 
< a onclick =javascript：SortOrder（'DATE'）href =＃>修改日期< / a> 
< span class =sort_sep>& nbsp;< / span> 
< a onclick =javascript：SortOrder（'ALPHA'）href =＃>按字母顺序< / 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）; 
} 
}）; 
} 
  

我想突出显示蓝色的活动链接。

解决方案

我改变了

小提琴

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


Following is the code for link tab,

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

I want to highlight the active link in blue color.here while selecting a link it's highlighted in blue color and once when I click outside it becomes black color again.How can i avoid this?

解决方案

I changed it a little more that the others but here is a working example.

Fiddle

First I updated the click logic to use an on then used the on to add the class active to the active selection.

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

Note in example I commented out you ajax call (as it wouldn't work in the fiddle)

这篇关于如何更改活动链接标记的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！