我有一个使用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>
任何帮助将不胜感激!
试试这个:
function changeClass() {
$('#referNav a').removeClass('active');
$(this).addClass('active');
}
您还应该像这样绑定JavaScript中的函数:
$('#referNav a').on('click', changeClass);
这样,正如Travis J在评论中指出的,$(this)
将引用正确的对象。
JSFIDLE
您需要做的是创建一个名为changeClass
的函数,该函数将查找class=“active”
,然后删除该类。然后将类名active
分配给刚刚单击的元素。将被单击的元素传递给函数是有益的,这样您就可以知道单击了哪个元素。否则,您可以使用全局对象事件
,查看当前的目标元素是什么。
我不愿意仅仅给出一个解决方案,因为这类问题不受鼓励。人们应该做自己的工作。然而,由于这是一个简单的情况:jsFiddle演示
$("div[id^=referLink] a").click(function(){
$('#referNav .active').removeClass('active');
$(this).addClass('active');
});
我的解决方案
$('#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');
});