提问者:小点点

从href中删除同级类


我在菜单上用猫头鹰旋转木马。当我滚动到div时,猫头鹰旋转木马自动向右滑动。现在,当我到达特定的div时,我将类添加到幻灯片(活动的),但是由于某种原因,我无法从其他幻灯片(他的兄弟)中移除活动的类。

我认为最好检查一下jsfiddle以了解问题所在...

<div class="body">
  <div class="menu">
    <ul class="owl-carousel owl-theme">
      <a href="#a" data-num="0">Review</a>
      <a href="#a" data-num="1" class="item">a</a>
      <a href="#b" data-num="2" class="item">b</a>
      <a href="#c" data-num="3" class="item">c</a>
      <a href="#d" data-num="4" class="item">d</a>
      <a href="#d" data-num="5" class="item">e</a>
      <a href="#d" data-num="6" class="item">f</a>
    </ul>
  </div>

JS文件

$('.owl-carousel').owlCarousel({
    nav: false,
    dots: false,
    singleItem: true,
})
   var owl = $('.owl-carousel');
   owl.owlCarousel();

   $( window ).scroll(function() {
      let scrollbarLocation = $(this).scrollTop();

        let scrollLinks = $('.item');

        scrollLinks.each(function(){
            let sectionOffset = $(this.hash).offset().top;

            if (sectionOffset <= scrollbarLocation){
                $(this).siblings().removeClass('active-link');
                $(this).addClass('active-link');

                let goToSlide = $(this).attr('data-num')
                owl.trigger('to.owl.carousel', goToSlide);
            }
        })

        if( scrollbarLocation === 0){
            scrollLinks.removeClass('active-link');
            owl.trigger('to.owl.carousel', 0);
        }
    });

查看https://jsfidle.net/jt31h4pr/132/


共1个答案

匿名用户

看看这把小提琴

https://jsfidle.net/09slpuwd/1/

您做错了什么是试图从this中删除活动类,然后将活动类添加到相同的this中,但实际上什么也不做。我的建议是从所有'.item'emelements中删除活动类,然后将其添加到活动类中。

作为替代方案,您可以存储以前的项目并从其中删除类,但我认为第一种方法更好。