CODEWITHSUNDEEP
jquerycss
Erik
Erik

Reputation: 5791

Changing CSS with CLICK?

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>

Upvotes: 1

Views: 298

Answers (3)

Silkster
Silkster

Reputation: 2210

$('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 }

Upvotes: 1

Stephan Muller
Stephan Muller

Reputation: 27600

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

Upvotes: 2

Alex
Alex

Reputation: 14618

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

Upvotes: 9

Related Questions