从 href 中删除兄弟姐妹类答案

【问题标题】：remove siblings class from a href从 href 中删除兄弟姐妹类
【发布时间】：2018-07-20 15:54:22
【问题描述】：

我在菜单上使用 owl carousel。当我滚动到 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/

【问题讨论】：

等等。您添加类 active-link 。类active 由轮播添加。你想控制哪一个？

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

看看这个小提琴

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

你做错了什么是试图从this 中删除活动类，然后将活动类添加到同一个this，这实际上什么都不做。我的建议是从所有 '.item' 元素中删除活动类，然后将其添加到活动类中。

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

【讨论】：

不客气。但是我觉得米海T版效率更高，因为很明显这样做会更快 $('.active-link').removeClass('active-link');比 $('.item').removeClass('active-link');因为第一个总是只包含一个元素。

【解决方案3】：

您好，问题出在下面一行

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

替换为

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

这是在同一时间删除和添加类，所以我所做的就是一旦我将类从所有我添加到当前元素上的类中删除

【讨论】：