CODEWITHSUNDEEP
javascripthtmlcss
user2028327
user2028327

Reputation: 39

Add class to <li> when clicking on a link

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

Upvotes: 0

Views: 3283

Answers (11)

Michael Unterthurner
Michael Unterthurner

Reputation: 941

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

Upvotes: 0

GwenM
GwenM

Reputation: 1335

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

Upvotes: 0

Pilgerstorfer Franz
Pilgerstorfer Franz

Reputation: 8359

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>

Upvotes: 0

Johan Bouveng
Johan Bouveng

Reputation: 565

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

        };

    })();

};

Upvotes: 2

dreamweiver
dreamweiver

Reputation: 6002

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 :)

Upvotes: -1

Denys Denysenko
Denys Denysenko

Reputation: 7894

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

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

Upvotes: 1

fmodos
fmodos

Reputation: 4568

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)">

Upvotes: 0

Michael Unterthurner
Michael Unterthurner

Reputation: 941

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

Upvotes: -1

Sowmya
Sowmya

Reputation: 26969

Use jquery

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

DEMO Updated

Upvotes: 3

Michael Walter
Michael Walter

Reputation: 1477

Try this with jQuery

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

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4638

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

Upvotes: -1

Related Questions