Question

这是我的菜单的HTML：

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

我想要的是，点击菜单中的链接后，活动课程将添加到点击的<li>。

提前致谢

Answer 1

使用jquery

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

<强> DEMO Updated

Answer 2

他不是要求jQuery解决方案。但是jQuery将是理想的选择，这里是如何使用javascript，最佳实践，事件委托和现代。也许有人也从中学到了新东西。

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

如果你使用jQuery，那么你可以使用这样的代码：

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

Answer 4

尝试使用jQuery

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

Answer 5

这是一个不使用jquery的原型，因为你没有在你的问题上请求它。它使用活动类搜索当前元素，将其删除并将类添加到单击的元素中。

Javasript功能

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

HTML代码

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

Answer 6

我希望我得到你想要的东西......我将eventHandlers添加到<ul>。点击删除从上一个elem点击并设置clicked-class（如果当前类是活动的？）

<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

这个应该适合你

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

我想这会起作用

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

很容易

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

<强>编辑：代码精炼

快乐编码：）

Answer 10

检查我的小提琴

我希望这就是你想要的

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

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

a:link {color:red;}

Answer 11

试试这个：

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

或者，如果您要将click事件附加到a：

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

Example fiddle

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

11 个答案: