CODEWITHSUNDEEP
jquerycss
user2514925
user2514925

Reputation: 949

How to Change the color of an active link tag

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?

Upvotes: 1

Views: 271

Answers (3)

Daniel Perv&#225;n
Daniel Perv&#225;n

Reputation: 1716

If you want to do it solely using HTML and CSS, you can use hidden radio buttons to achieve this.

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

Upvotes: 2

AbstractChaos
AbstractChaos

Reputation: 4211

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)

Upvotes: 2

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

Use this 

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

Upvotes: 1

Related Questions