Question

我在菜单上使用猫头鹰传送带。当我滚动到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://jsfiddle.net/jt31h4pr/132/

Answer 1

问题是您在同一元素（this）上删除/添加了active-link类。您只需要在已经具有类active-link的元素上移除removeClass。 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>

Answer 2

看看这个小提琴

https://jsfiddle.net/09sLpuwd/1/

您在做什么错，是尝试从this中删除活动类，然后将活动类添加到同一this中，而实际上却无济于事。我建议的是从所有'.item'个要素中删除活动类，然后将其添加到活动中。

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

Answer 3

嗨，问题在于下面的行

$(this).siblings().removeClass('active-link');

用

替换

$("div.active a").removeClass('active-link');

这是同时删除和添加课程的，所以一旦我从所有班级中删除了班级，我就在现在的元素上添加了课程

从href移除兄弟姐妹类

3 个答案: