Question

我在实施非标准解决方案时遇到了问题。所以我的HTML：

<a href="#6" id="page-link-6">6</a>
<a href="#7" id="page-link-7" class="active">7</a>
<a href="#8" id="page-link-8">8</a>

我可怜的，无能的js：

$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 0) {
        $("#page-link-6").addClass("active" );
   }
});

我选择了（有效）链接。当用户在文档顶部滚动时，我需要将相同（活动）类添加到previus链接。此示例具有活动#page-link-7。 Previus是6.所以当用户在顶部滚动时，类＆＃34;活动＆＃34;将添加＃page-link-6。但如果当前活动的页面链接是9，我怎么能动态地转到8？我希望有人可以帮助我。感谢。

Answer 1

找到当前处于活动状态的元素，然后使用jQuerys .prev()方法查找“上一个”链接。

之类的东西

$('.active').prev().addClass("active" );

Answer 2

您可以做的只是找到next链接的previous sibling和active，并在下面添加类：

将所有<a>换行到单独的class

中

<div class="Links">
   <a href="#6" id="page-link-6">6</a>
   <a href="#7" id="page-link-7" class="active">7</a>
   <a href="#8" id="page-link-8">8</a>
</div>

<强> JS

var activeLink=$('.Links').children().find('.active').removeClass('active');
if($(window).scrollTop() + $(window).height() > $(document).height() - 0) 
{
      $(activeLink).prev().addClass('active');
}
else
{
     $(activeLink).next().addClass('active');
}

<强>更新

<强> DEMO

$(window).on('scroll',function(){
    var activeLink=$('.Links').find('.active');
    if($(window).scrollTop() + $(window).height() > $(document).height() - 0) 
    {

          if($(activeLink).prev().length>0)
          {
             $(activeLink).removeClass('active');
             $(activeLink).prev().addClass('active');
          }
    }
    else
    {
        if($(activeLink).next().length>0)
        {
            $(activeLink).removeClass('active');
            $(activeLink).next().addClass('active');
        }
    }
});

Answer 3

我真的不明白你的问题，但.toggleClass()听起来可能对你更好。

$('a').on('click', function (e) {
    $('a').toggleClass("active");
});

Simple Demo Fiddle

如何动态选择以前的兄弟元素

3 个答案: