Question

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

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类。然后使用<li>获取.siblings()的所有同级元素，并从其中删除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并将其设置为active类。

   $(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

您可以使用addClass和jquery的removeClass函数来实现。

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

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

3 个答案: