Tips on maintaining the consistent color of an active link until selecting a different link

Question

Tips on maintaining the consistent color of an active link until selecting a different link

Is it possible to make a link change color when clicked, and have that color stay until another link is clicked? How can I achieve this using the "active" attribute? I attempted it, but the link reverts back to its original color after clicking.


    <html>
    <head>

    <style>

    a
    {
        display:block;
        height:5%;
        width:10%;
        background-color:#96C;  
        border: solid #96C 1px;
        margin-top:5px;
    }

    a:hover
    {
        background-color:#666;
    }

    a:active
    {
        background-color:#C99;
    }
    </style>


    </head>

    <body>

    <a href="#">Home</a>

    <a href="#">Sign in</a>
    <a href="#">Sign up</a>
    <a href="#">Exit</a>


    </body>
    </html>

html css

Answer 1

Answer №1

The :active pseudo class was not intended for this purpose. You can achieve it using JavaScript instead. If you are familiar with jQuery, you could implement something similar to the following:

var links = $("a");
links.on("click",function(){
  links.removeClass("highlighted");
  $(this).toggleClass("highlighted");
});

Don't forget to include the "highlighted" CSS rule:

a.highlighted {
 background-color: #C99;
}

You can view a working example in this fiddle http://jsfiddle.net/QQb27/

Answer 2

The :active pseudo class was not intended for this purpose. You can achieve it using JavaScript instead. If you are familiar with jQuery, you could implement something similar to the following:

var links = $("a");
links.on("click",function(){
  links.removeClass("highlighted");
  $(this).toggleClass("highlighted");
});

Don't forget to include the "highlighted" CSS rule:

a.highlighted {
 background-color: #C99;
}

You can view a working example in this fiddle http://jsfiddle.net/QQb27/

Answer 3

Answer №2

The :active pseudo selector only applies when a link is being clicked temporarily.

For more information, click here.

To ensure that the link retains its color, it's recommended to create and apply a custom class specifically for that link on the current page.

Check out this related discussion thread on this topic.

Answer 4

The :active pseudo selector only applies when a link is being clicked temporarily.

For more information, click here.

To ensure that the link retains its color, it's recommended to create and apply a custom class specifically for that link on the current page.

Check out this related discussion thread on this topic.

Answer 5

Answer №3

To highlight the currently active link, you can utilize JavaScript (specifically jQuery). Check out an example of this in action by visiting this fiddle.

Here is a simple setup:

<a href="#">Link 1</a>
<a href="#">Link 2</a>

In your CSS file, define the styles for your links:

a { color: green; }
.active { color: orange; }

Now, using jQuery, you can toggle the "active" class on click:

$('a').on('click', function() {
   $('a').removeClass();
    $(this).addClass('active');
});

Answer 6

To highlight the currently active link, you can utilize JavaScript (specifically jQuery). Check out an example of this in action by visiting this fiddle.

Here is a simple setup:

<a href="#">Link 1</a>
<a href="#">Link 2</a>

In your CSS file, define the styles for your links:

a { color: green; }
.active { color: orange; }

Now, using jQuery, you can toggle the "active" class on click:

$('a').on('click', function() {
   $('a').removeClass();
    $(this).addClass('active');
});

Answer 7

Answer №4

Enhanced version of dward's response with custom styles: http://jsfiddle.net/zEwUY/1/

a:hover = When you hover over the link.

a:active = Clicking and holding your mouse on the link.

a:visited = Appearance after visiting the link before.

Answer 8

Enhanced version of dward's response with custom styles: http://jsfiddle.net/zEwUY/1/

a:hover = When you hover over the link.

a:active = Clicking and holding your mouse on the link.

a:visited = Appearance after visiting the link before.

Tips on maintaining the consistent color of an active link until selecting a different link

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adding a subtle gradient to the image, just ahead of the SVG

Utilizing Material UI to access CSS classes in React

Evaluate numerical values using xsl:choose function

Issues with the loading of CSS in Wordpress

What is the best way to remove a class from an element upon successful completion?

Differentiate pointer for checkbox HTML

Why is my second CSS animation, which is running late, causing such chaos?

The overflow of CSS text selection color spills beyond the boundaries of the box

Collapsing tabs feature in Bootstrap 4

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

The marquee's position is reset the first time text is loaded dynamically from an API

Exclude the UL hierarchy from removing a class in jQuery

The padding on the button inside the v-card is not being applied as expected

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

How can I make the navbar in Angular stay fixed in place?

Minimize the entire project by compressing the .css, .js, and .html files

"Unlocking the power of your device's microphone with

Resizable vector graphics with consistent border dimensions

Vue.js fails to show Font awesome icon

Managing collapsible content in Bootstrap 4: A comprehensive guide