Add class to link

Question

I need help adding a class to these links:

<a class="campusIcon km-icon" onclick ="window.location.href='indexHome.html'" data-rel="external">Campus</a>
<a class="searchIcon km-icon"  onclick ="window.location.href='indexListView.html'"  data-rel="external">Search</a>
<a class="mapIcon km-icon"  onclick ="window.location.href='indexKBlock.html'"  data-rel="external">Map</a>
<a class="favIcon km-icon" onclick ="window.location.href='indexChart.html'" data-rel="external">Fav</a>

The class I want to add is km-state-active. If I add the class inside an onClick event then I get my class is added but location.href does not work.

So, what's the problem and how can I solve it?

Incredible. Posting your question I bet there was at least 30 already posted questions with the same problem. — Roko C. Buljan, Apr 26 '12 at 16:28
@Danis beside each answer you see a voting section(with a up and down arrow) and a tick sign below it, please make habit to click on it to accept answer that help you, to make everyone happy to help.. — thecodeparadox, Apr 26 '12 at 16:30
possible duplicate of [How Can I Add a "Selected" Class Based on URL with jQuery?](http://stackoverflow.com/questions/2079788/how-can-i-add-a-selected-class-based-on-url-with-jquery) — Danis, Sep 08 '14 at 14:16

score 0 · Answer 1 · answered Apr 26 '12 at 16:24

0

You mean something like this?:

$("a").click(function(){
    $(this).toggleClass("km-state-active");
});

answered Apr 26 '12 at 16:24

James Johnson

45,496
8
73
110

thecodeparadox · Answer 2 · 2012-04-26T16:33:38.367

0

Try this:

HTML:

<a class="campusIcon km-icon"  href="indexHome.html" data-rel="external">Campus</a> 
<a class="searchIcon km-icon" href="indexListView.html" data-rel="external">Search</a> 
<a class="mapIcon km-icon" href="indexKBlock.html" data-rel="external">Map</a> 
<a class="favIcon km-icon" href="indexChart.html" data-rel="external">Fav</a>

jQuery:

$("a").on('click', function() {
   $(this).addClass("km-state-active").attr('href', 'YOUR_URL');
});

edited Apr 26 '12 at 16:33

answered Apr 26 '12 at 16:26

thecodeparadox

86,271
21
138
164

no, there is another problem...I can not bind click event with two action. In my case it adds class or make location.href – Danis Apr 26 '12 at 16:32

score 0 · Answer 3 · answered Apr 26 '12 at 16:27

Why are you using inline code to handle the click on an anchor tag? Why not:

JS

$("a").click(function() {
    $(this).addClass("km-state-active");
});

HTML

<a class="campusIcon km-icon"  href="indexHome.html" data-rel="external">Campus</a> 
<a class="searchIcon km-icon" href="indexListView.html" data-rel="external">Search</a> 
<a class="mapIcon km-icon" href="indexKBlock.html" data-rel="external">Map</a> 
<a class="favIcon km-icon" href="indexChart.html" data-rel="external">Fav</a>

Additional Information

This is a decent article (old but good): Why Inline CSS And JavaScript Code Is Such A Bad Thing

score 0 · Answer 4 · answered Apr 26 '12 at 16:27

You shouldn't use inline script. its a bad practice. Update you markup to look similar to this.

<a class="campusIcon km-icon" href ="indexHome.html" data-rel="external">Campus</a>

And use jQuery to add the class on click

$("a").on('click', function() {
    $(this).addClass("km-state-active");
});

Add class to link

4 Answers4