Add class to
when clicking on a link

Question

That's the html of my menu:

<ul class="nav">
    <li><a href="#a" class="active">A</a></li>
    <li><a href="#b" >B</a></li>
    <li><a href="#c" >C</a></li>
    <li><a href="#d" >D</a></li>
</ul>

I want that, after I clicked on a link in the menu, the active class will be added to the clicked <li>.

Thanks in advance

duplicated entry of that? http://stackoverflow.com/questions/6565321/adding-a-class-to-menu-li-and-then-clicking-the-link-using-jquery or that http://stackoverflow.com/questions/9688778/jquery-add-class-to-current-li-and-remove-prev-li-when-click-inside-li-a or that http://stackoverflow.com/questions/2435265/jquery-adding-class-to-the-li-element-after-the-link-is-clicked-and-deselectin — Michael Unterthurner, Jul 19 '13 at 07:33
It's not a duplicate since he is not asking for a jquery solution. — Johan Bouveng, Jul 19 '13 at 07:42

Sowmya · Answer 1 · 2013-07-19T07:04:16.043

3

Use jquery

    $("li a").click(function() {
    $('li a').not(this).removeClass('active');
    $(this).toggleClass('active');
    });

DEMO Updated

edited Jul 19 '13 at 07:04

answered Jul 19 '13 at 06:57

Sowmya

26,684
21
96
136

1

it doesn't remove the active class of the older one – fmodos Jul 19 '13 at 06:58

score 2 · Answer 2 · answered Jul 19 '13 at 07:41

He is not asking for a jQuery solution. But that jQuery would be the ideal choice, here is how to do it with javascript, best practices, event delegation and modern. Perhaps someone learns something new from it as well.

http://jsfiddle.net/N9Hem/

window.onload = function(){

    (function(){
        var els = [];
        var doc = document;
        var get = function(id){return doc.getElementById(id);};

        get('clickable').onclick = function(evt){
            evt = evt || window.event;
            var el = evt.target || evt.srcElement;
            els = doc.querySelectorAll('#clickable a');

            if(el.nodeName == "A"){
                for(var i = els.length - 1; i >= 0; i -= 1){
                    els[i].className = '';
                };
                el.className = 'active';
            };

        };

    })();

};

Denys Denysenko · Answer 3 · 2013-07-19T07:07:40.337

1

If you use jQuery then you could use code like this:

$(function () {
    $(".nav a").click(function () {
        $(".nav a").removeClass("active");
        $(this).addClass("active");
    });
});

edited Jul 19 '13 at 07:07

answered Jul 19 '13 at 06:57

Denys Denysenko

7,598
1
20
30

Michael Walter · Answer 4 · 2013-07-19T06:59:38.083

0

Try this with jQuery

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

edited Jul 19 '13 at 06:59

answered Jul 19 '13 at 06:58

Michael Walter

1,427
12
28

score 0 · Answer 5 · answered Jul 19 '13 at 07:06

Here is a prototype that doesn't use jquery as you didn't request it on your question. It searches for the current element with the active class, remove it and add the class to the clicked one.

Javasript Function

function activeThis(element){
    var current = document.getElementsByClassName("active")[0];
    current.className = null;
    element.className="active";
}

HTML code

<a href="#b" onclick="activeThis(this)">

Pilgerstorfer Franz · Answer 6 · 2013-07-19T07:52:31.197

0

I hope I got what you want... I add eventHandlers to <ul>. On click remove clicked from previous elem and set clicked-class (if current class is active??)

<ul class="nav">
    <li><a href="#a" class="active">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
</ul>
<script>
    var clickedElem = null;
    document.getElementsByClassName("nav")[0].addEventListener("click", function (e) {
        if (clickedElem)
            clickedElem.removeAttribute("class");

        // check if e.srcElement.className is active?? that's what you want?
        e.srcElement.className = "clicked";
        clickedElem = e.srcElement;
    });
</script>

edited Jul 19 '13 at 07:52

answered Jul 19 '13 at 07:18

Pilgerstorfer Franz

8,303
3
41
54

1

Its better to add one event handler on the UL instead. – Johan Bouveng Jul 19 '13 at 07:44
...and make sure its cross browser! – Johan Bouveng Jul 19 '13 at 09:28

GwenM · Answer 7 · 2013-07-19T07:53:17.057

0

This one should works for you

elems =document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", function (e) {
                for (var i = 0; i < elems.length; i++) {
                    elems[i].className="";
                };
                this.className = "active";
        });
}

edited Jul 19 '13 at 07:53

answered Jul 19 '13 at 07:45

GwenM

1,198
10
24

score 0 · Answer 8 · answered Jul 19 '13 at 09:41

I guess this will work

var navlinks = document.getElementByClass('nav').getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
    if(navlinks[i].className == 'active'){
        navlinks[i].parentNode.parentNode.parentNode.className = 'YOUR CLASS';
    }
}

score -1 · Answer 9 · edited Jul 19 '13 at 07:25

-1

thats quite easy

jQuery CODE:

$('.nav li a').on('click',function(){ 
 $('.nav li').each(function() {
    var anc=$(this).find('a');
    if(anc.hasClass('active'))
    { 
       $(anc).removeClass('active');
    }
 })
  $(this).addClass('active');
 })

Edited: Code is refined

Happy Coding :)

edited Jul 19 '13 at 07:25

fmodos

4,472
1
16
17

answered Jul 19 '13 at 06:58

dreamweiver

6,002
2
24
39

Why is the DV for this ? – dreamweiver Jul 19 '13 at 07:26
I agree that there was spelling mistake in my code,as i had manually wrote it not a running copy.i cant beleive i got a down vote for that :( – dreamweiver Jul 19 '13 at 07:43
my example works. but downvote for that, that the example is not working at him.... well i have flagged this question.. because there are many many many examples of this topic on stackoverflow. – Michael Unterthurner Jul 19 '13 at 07:49

score -1 · Answer 10 · answered Jul 19 '13 at 06:59

-1

Check my fiddle

I hope this is what you want

http://jsfiddle.net/arunberti/ftZzs/

a:visited 
{
    color:green;
}
a:active  {color:yellow;}

a:link {color:red;}

answered Jul 19 '13 at 06:59

Arun Bertil

4,598
4
33
59

I'm assuming that is because the link color resets to green after you release the mouse button. As far as I understand the question the link should remain yellow until the next link is clicked. – Chris Jul 19 '13 at 07:04

score -1 · Answer 11 · answered Jul 19 '13 at 07:05

Try this:

$('.nav li').click(function(e) {
    $(this).addClass('selected').siblings().removeClass('selected');
});

Alternatively, if you want to attach the click event to the a:

$('.nav a').click(function(e) {
    e.preventDefault();
    $('.nav a').removeClass('selected');
    $(this).addClass('selected');
});

Example fiddle

Add class to when clicking on a link

11 Answers11

Add class to
when clicking on a link