更改文本链接颜色javascript或CSS

Question

I have a menu on my website, I'm using CSS when mouseo hover on item on my menu and when clicking.

here is my menu :

<div id="stickyheader">
    <a href="#disco">discography</a><span class="grey"> - </span>
    <a href="#bio">biography</a><span class="grey"> - </span>
    <a href="#press">press</a><span class="grey"> - </span>
    <a href="#studio">studio</a><span class="grey"> - </span>
    <a href="#contacts">contacts</a> 
</div>

and my CSS for the links:

a:link, a:visited, a:hover, a:focus, a:active {
    color: #dcdedd;
    text-decoration: none;
    transition: 0.3s ease;
    text-decoration: none;
    -webkit-transition:color 0.5s ease-in;  
    -moz-transition:color 0.5s ease-in;  
    -o-transition:color 0.5s ease-in;  
    transition:color 0.5s ease-in;
}
a:hover{
    color: red
}

I would like to know if there's a way using css, or javascript, when clicking on one item of my menu, to change the text color of the selected item to red, and keep the red color until choosing another item of my menu.

This need to happen only in my #stickyheader div, not on the rest of the website...

example : when I click on "Biography", biography turns into red, with the transition (0.5s ease-in), and "biography" stays red until I click on another item, and when I click on "discography", discography turns into red, and Biography return lightgray...

I can't manage to find a solution...

maybe JS ?

here is a JSfiddle : http://jsfiddle.net/B5dYv/2/

Answer 1

Here's a jquery solution:

$('#wrapper').on('click', 'a', function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

And the relevant css:

.selected
{
     color: red !important;
}

Updated Fiddle

Answer 2

You can do that with javascript:

$(document).ready(function() {
    $('#stickyheader a').on('click', function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});

I updated your jsfiddle: http://jsfiddle.net/B5dYv/5/

Answer 3

You can do something like that with jQuery :

http://jsfiddle.net/fG5Uy/2/

Javascript:

$(document).ready(function(){
    $("#stickyheader a").click(function(){
        $("#stickyheader a").each(function(i, e){
            $(this).removeClass("selected");
        });                                  
        $(this).addClass("selected");
    });
});

CSS:

#stickyheader a.selected
{
    color : blue;
}

Answer 4

Maybe you can try something like this http://jsfiddle.net/JWkZn/

$('#wrapper a').click(function(){
    $('#wrapper a').removeClass('active');
    $(this).addClass('active');
});


a.active { color: red }