Guide on Modifying the color of a selected link tag

Question

Guide on Modifying the color of a selected link tag

Here is the code snippet for a 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 am looking to change the color of the active link to blue, however, it returns to black once clicked outside. How can I prevent this from happening?

jquery css

Answer 1

Answer №1

After making some adjustments that differ from the others, I have provided a functional example below.

Link to Fiddle

Initially, I revamped the click logic to utilize an "on" method, and then utilized it to append 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);
    });
});

Please note that in the example provided, I have commented out the ajax call (as it would not function in the fiddle environment).

Answer 2

After making some adjustments that differ from the others, I have provided a functional example below.

Link to Fiddle

Initially, I revamped the click logic to utilize an "on" method, and then utilized it to append 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);
    });
});

Please note that in the example provided, I have commented out the ajax call (as it would not function in the fiddle environment).

Answer 3

Answer №2

To achieve this using only HTML and CSS, you can utilize hidden radio buttons.

Check out this Fiddle for a demonstration

Here is the HTML code:

<label class="sort" onchange="alert('Sorting by: date')">
    <input type="radio" name="sort" value="date" checked />
    <span>Date Modified</span>
</label>

And here is the accompanying CSS:

.sort > input[type=radio] {
    display: none;   
}

.sort {
    cursor: pointer;
}

.sort > input[type=radio]:checked + span {
    color: red;
}

Answer 4

To achieve this using only HTML and CSS, you can utilize hidden radio buttons.

Check out this Fiddle for a demonstration

Here is the HTML code:

<label class="sort" onchange="alert('Sorting by: date')">
    <input type="radio" name="sort" value="date" checked />
    <span>Date Modified</span>
</label>

And here is the accompanying CSS:

.sort > input[type=radio] {
    display: none;   
}

.sort {
    cursor: pointer;
}

.sort > input[type=radio]:checked + span {
    color: red;
}

Answer 5

Answer №3

Implement the following CSS code snippet for links:

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 6

Implement the following CSS code snippet for links:

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

Guide on Modifying the color of a selected link tag

Answer №1

Answer №2

Answer №3

Similar questions

Stop the ongoing ajax request, initiate a new one, and then resume the initial ajax call

Issue with fading in! The div should fade in only when it is no longer covering the element

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

Ajax encountering 404 error in ASP MVC3 website

Guide to creating a key-value pair from an array

Is it possible to generate multiple modal windows with similar designs but varying content?

Disappear text gradually while scrolling horizontally

Discover the simple steps to generating dynamic variables with jQuery!

Generate a collection of div elements as child nodes

Modify the color or background color of a disabled Material UI checkbox

Ways to adjust the distance between logo and slider

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

The div needs to be positioned above another div, not beneath it

Using Model-View-Controller (MVC) to seamlessly integrate jQuery with AJAX for dropdown lists and

The functionality to refresh an input field upon clicking a button is not functioning as expected

Is it true that document.execCommand only works with buttons and not links?

Using jQuery to interact with Twitter Bootstrap modals

Clicking our way back through the loop

Populate DataGrid using an input through AJAX and jQuery technology

Troubleshooting issue with image dimensions in Angular within CKEditor content