使用jQuery滚动导航添加或删除类

Question

当我点击导航选项卡时，这段代码可以帮助我滚动到特定的部分。简而言之，它可以帮助我制作一个单页网站。如何在此代码中向导航<li>标记添加和删除active类？

jQuery

$(document).ready(function() {
$('ul').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
return false;
});
});

Answer 1

您可以使用.parent('li')获取a的父级并向其添加active类。然后使用.siblings()获取<li>的所有同级并从中删除active类。

$(document).ready(function() {
$('ul').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
return false;
});
});

Answer 2

您可以从li中删除所有.active，然后获取最接近的li并将活动类设置为它。

$(document).ready(function() {
$('ul').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
// remove all .ative from lis
$("ul li").removeClass('active');
// set active class to the parent li
$(this).closest('li').addClass('active');
return false;
});
});

Answer 3

您可以使用jquery的addClass和removeClass函数来完成此操作。

$('selector').addClass('className');
$('selector').removeClass('className');