如何动态选择前一个兄弟元素

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" );
   }
});

我已经选择了（活动的）链接。当用户滚动到文档顶部时，我需要为前一个链接添加相同的（活动的）类。这个例子有一个活动的#page-link-7。前一个是6。所以当用户滚动到顶部时，class“active”将被添加到#page-link-6。但如果当前活动的页面链接是9，如何动态地转到8？希望有人可以在这里帮助我。谢谢。

- Arriba

---

如果你愿意，你可以使用一个插件：https://github.com/sxalexander/jquery-scrollspy - Radonirina Maminiaina

我仍然不确定问题出在哪里。 - Praveen Puglia

Answer 1

找到当前激活的元素，然后使用jQuery的.prev()方法查找“上一个”链接。

类似于：

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

- Craicerjack

Answer 2

你可以做的就是找到“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');
}

更新

演示

$(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');
        }
    }
});

- Guruprasad J Rao

Answer 3

我不是很理解你的问题，但似乎.toggleClass()对你更好。

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

简单演示 Fiddle。

- Coastal-Cam