将课程添加到 <li> 单击链接时

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

Answer 1

Use jquery

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

DEMO Updated

Answer 2

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

        };

    })();

};

Answer 3

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

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

Answer 4

Try this with jQuery

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

Answer 5

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

Answer 6

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>

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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