非常简单的问题,但现在已经困扰了我近一个小时。基本上,我想更新列表类onClick,然后在单击另一个项目时再次删除该类。
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li class="current-menu-item">
<a class="scroll" href="#top"><span>Home</span></a>
</li>
<li class="">
<a class="scroll" href="#featured_work_anchor"><span>Featured Work</span></a>
</li>
<li class="">
<a class="scroll" href="#about_contact_anchor"><span>About/Contact</span></a>
</li>
</ul>
</div>
</nav>
的jQuery
$(document).ready(function() {
$('#menu-main-menu li').on('click', changeClass);
});
function changeClass() {
$('#menu-main-menu li').removeClass('current-menu-item');
$(this).addClass('current-menu-item');
}
JSFiddle,准备出发了。我感谢任何帮助。也许我正在接近这个问题或者错过了一些愚蠢的事情?
答案 0 :(得分:3)
我唯一能看到的问题是removeClass()
函数,要么不传递任何参数,要么删除li
中的所有类,要么传递要删除的类名。
function changeClass() {
$('#menu-main-menu li').removeClass('current-menu-item');
$(this).addClass('current-menu-item');
}
演示:Fiddle(也是你忘了包含jQuery的小提琴)
答案 1 :(得分:1)
您需要传递被设置为当前的元素:
$(document).ready(function() {
$('#menu-main-menu li').on('click', function(){
changeClass($(this));
});
});
function changeClass(element) {
$('#menu-main-menu li').removeClass('current-menu-item');
element.addClass('current-menu-item');
}