change text link color javascript or 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/

Patsy Issa · Accepted Answer · 2013-10-31 13:03:51Z

2

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

answered Oct 31, 2013 at 13:03

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darthmaim · Accepted Answer · 2013-10-31 13:04:12Z

1

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/

answered Oct 31, 2013 at 13:04

darthmaim

5,1681 gold badge29 silver badges41 bronze badges

5 Comments

mmdwc Over a year ago

thanks a lot @darthmaim, I've edited my jsfiddle, I have a "back to top" section after each section in my website, when clicking on back to top, is it possible to remove all colors in my menu ? when I click on Biography, biography stays red, and when I click on back to top at the bottom of my section I would like to go back on top of my page, like it works nom, and remove all red colors in my menu, you understand what I mean ? here is my jsfiddle link : jsfiddle.net/B5dYv/12

darthmaim Over a year ago

To remove all colors from the menu simply use $(".active").removeClass("active");

mmdwc Over a year ago

hum... it's not working... i already have $(".active").removeClass("active"); in my js no ?

darthmaim Over a year ago

You have to call it when you want to remove the colors, for example with this code: $('.backToTop').on('click', function() { $(".active").removeClass("active"); });

mmdwc Over a year ago

ok thanks a lot @darthmaim, I just corrected with the right class name and it works perfectly well ! thanks

dooxe · Accepted Answer · 2013-10-31 13:03:49Z

0

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

answered Oct 31, 2013 at 13:03

dooxe

1,49012 silver badges19 bronze badges

Comments

srdjans · Accepted Answer · 2013-10-31 14:59:32Z

0

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 }

edited Oct 31, 2013 at 14:59

answered Oct 31, 2013 at 13:08

srdjans

113 bronze badges

Collectives™ on Stack Overflow

change text link color javascript or css

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related