0

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

4

11 回答 11

3

使用 jQuery

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

演示更新

于 2013-07-19T06:57:27.797 回答
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';
            };

        };

    })();

};
于 2013-07-19T07:41:26.020 回答
1

如果您使用 jQuery，那么您可以使用如下代码：

$(function () {
    $(".nav a").click(function () {
        $(".nav a").removeClass("active");
        $(this).addClass("active");
    });
});
于 2013-07-19T06:57:51.793 回答
0

用 jQuery 试试这个

$('#nav li a').click(function(){
    $('#nav li a').removeClass('active');
    $(this).addClass('active');
});
于 2013-07-19T06:58:17.233 回答
0

这个应该适合你

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";
        });
}
于 2013-07-19T07:45:02.743 回答
0

我想这会奏效

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';
    }
}
于 2013-07-19T09:41:10.333 回答
0

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

Javasript 函数

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

HTML 代码

<a href="#b" onclick="activeThis(this)">
于 2013-07-19T07:06:29.453 回答
0

我希望我得到了你想要的......我将 eventHandlers 添加到<ul>. 单击时从上一个元素中删除单击并设置单击类（如果当前类处于活动状态？？）

<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>
于 2013-07-19T07:18:46.113 回答
-1

这很容易

jQuery代码：

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

已编辑： 代码已完善

快乐编码:)

于 2013-07-19T06:58:22.543 回答
-1

检查我的小提琴

我希望这是你想要的

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

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

a:link {color:red;}
于 2013-07-19T06:59:07.333 回答
-1

尝试这个：

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

示例小提琴

于 2013-07-19T07:05:03.873 回答