How Do You Toggle Links To Stay A Certain Color Until Clicked Again

I'm trying to make it so that when I click on a link, it makes it stay a certain thing, and then when clicked again, change back. How do I go about doing this? Can i do it in html

Solution 1:

You can do this with CSS + jQuery:

CSS:

a{
    color: blue
}
a.clicked{
    color: red;
}

jQuery:

$(document).ready(function(){
    $('a').click(function(){
        $(this).toggleClass('clicked');
    });
});

You can check an example here »

Solution 2:

If only looking for pure Javascript and HTML:

function toggle_link(select){
    var color = select.style.color;
    select.style.color = (color == "blue" ? "green" : "blue");
}

And in your HTML, use the onclick attribute.

<aonclick="toggle_link(this)"style="color:blue">Click to change color!</a>

A working fiddle: jsFiddle

Solution 3:

You'll definitely need JavaScript for that. (If you want to 'cheat' create 2 HTML pages with the same content except the links, so you can link them together but with a different name.)