javascript - 从 href 中删除兄弟类

Question

我在菜单上使用猫头鹰旋转木马。当我滚动到 div 时，猫头鹰轮播会自动滑到右侧幻灯片。现在，当我到达特定的 div 时，我将类添加到幻灯片(事件)，但由于某种原因，我无法从其他幻灯片(他的 sibling )中删除事件类。

我认为最好检查 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://jsfiddle.net/jt31h4pr/132/

Answer 1

问题是您在同一元素( this )上删除/添加了 active-link 类。您只需在已经具有active-link 类的元素上删除Class。active 类由插件控制，所有可见元素都具有 active 类

见下文

$('.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){
            	$('.active-link').removeClass('active-link'); // added
              
              $(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);
        }
    });

    

.body {
  height: 5000px;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.item {
  width: 200px;
  height: 70px;
  background: red;
  margin: 0 15px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 4px solid transparent;
}

.active-link {
  border-bottom: 4px solid #000;
}

.menu {
  position: fixed;
  top: 0;
}

section {
  width: 100%;
  height: 600px;
  background: #f8f9fb;
}

#a {
  background: lightblue;
  margin-top: 200px;
}
#b {
  background: lightgreen;
}
#c {
  background: tomato;
}
#d {
  background: lightpink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">


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



<section id="a"></section>
<section id="b"></section>
<section id="c"></section>
<section id="d"></section>

</div>