Changing CSS with CLICK?

Question

Is it possible to change the CSS when a link is clicked and return it to its normal state when another link is clicked, changing that CSS, as well?

    <div id="nv_wrap">
        <a class="panel nv7" href="#item8"></a>
        <a class="panel nv6" href="#item7"></a>
        <a class="panel nv5" href="#item6"></a>
        <a class="panel nv4" href="#item5"></a>
        <a class="panel nv3" href="#item4"></a>
        <a class="panel nv2" href="#item3"></a>
        <a class="panel nv1" href="#item2"></a>
    </div>

are you able to use JavaScript, to do this?

Matt Ellen
– Matt Ellen

2010-09-08 14:51:49 +00:00
Commented Sep 8, 2010 at 14:51 — Matt Ellen
– Matt Ellen, Commented Sep 8, 2010 at 14:51

Alex · Accepted Answer · 2010-09-08 14:53:15Z

9

using jQuery, something like this:

$("#nv_wrap a.panel").click(function(){
    $("#nv_wrap a.clicked").removeClass("clicked"); //returns the old one to its normal state
    $(this).addClass("clicked"); //assigns an additional class to the clicked element.
});

answered Sep 8, 2010 at 14:53

Alex

14.7k5 gold badges45 silver badges60 bronze badges

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

Comments

Stephan Muller · Accepted Answer · 2010-09-08 14:53:29Z

2

Yes, there's in fact several ways to do so. In your example you could even use the a:active selector, which contains css that only applies to active links.

a { color: blue }
a:active { color: red }

All links will be blue now, except the one you clicked; that one turns red.

-edit- tried to show an example in jsfiddle but I guess that doesn't work because of the iframes

answered Sep 8, 2010 at 14:53

Stephan Muller

27.7k18 gold badges87 silver badges127 bronze badges

Comments

Silkster · Accepted Answer · 2010-09-08 17:13:53Z

1

$('div#nv_wrap a.panel').click(function(e) {
    e.preventDefault();
    $(this).addClass('clicked').siblings().removeClass('clicked');
});

Edit:

example CSS:

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

edited Sep 8, 2010 at 17:13

answered Sep 8, 2010 at 14:57

Silkster

2,22016 silver badges29 bronze badges

7 Comments

Silkster Over a year ago

You might also use toggle instead of click. That way when you click on the same link twice, it resets to not 'clicked'.

Silkster Over a year ago

also, since you're using anchor tags, you will need to use preventDefault so the browser doesn't reload.

Alex Over a year ago

Since when the browser reloads on anchors?

Silkster Over a year ago

@Alexander, are you using the Socratic method to make a point?

Alex Over a year ago

no, I asked a question. I want to know, in which circumstances this occurs, because in my practice I have never encountered such behavior. If such circumstances exist, I want to know about it. This IS a forum where knowledge is shared among people? I don't care that much about reputation, for today I've reached my daily reputation cap. I am just reading alternative solutions.

|

Collectives™ on Stack Overflow

Changing CSS with CLICK?

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related