使用 jquery 更改类 onClick答案

【问题标题】：Change class onClick using jquery使用 jquery 更改类 onClick
【发布时间】：2013-03-26 19:20:52
【问题描述】：

我有一个使用 class="active" 显示活动状态的导航。单击链接时，我需要将“活动”类添加到单击的链接中，并从所有其他链接中删除“活动”类。

这是我的代码：

<div id="referNav">
<div id="referLink1"><a href="javascript:;" onClick="changeClass();" class="active"></a></div>
<div id="referLink2"><a href="javascript:;" onClick="changeClass();" class=""></a></div>
<div id="referLink3"><a href="javascript:;" onClick="changeClass();" class=""></a></div>
</div>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个：

function changeClass() {
    $('#referNav a').removeClass('active');
    $(this).addClass('active');
}

你还应该像这样在 javacript 中绑定函数：

$('#referNav a').on('click', changeClass);

这样，正如 Travis J 在 cmets 中指出的那样，$(this) 将引用正确的对象。

jsFiddle

【讨论】：

请注意，由于此函数不是事件，this 将是对窗口的引用。

【解决方案2】：

您需要做的是创建一个名为changeClass 的函数，它将查找class="active"，然后删除该类。然后将类名active 分配给刚刚单击的元素。将被点击的元素传递给函数将是有益的，这样您就会知道点击了哪个元素。否则，您可以使用全局对象 event 并查看当前的 targetElement 是什么。

我不愿意只展示解决方案，因为不鼓励此类问题。人们应该做自己的工作。但是，由于这是一个简单的情况：jsFiddle demo

$("div[id^=referLink] a").click(function(){
 $('#referNav .active').removeClass('active');
 $(this).addClass('active');
});

【讨论】：

【解决方案3】：

我的解决方案

 $('#referNav').on('div','click',functin(e){
    $(e.target).closest('div[class^="referLink"]').siblings().find('a').removeClass('active');
    $(e.target).closest('div').find('a').addClass('active');
    });

【讨论】：