从href移除兄弟姐妹类

Question

I'm using owl carousel on a menu. when I scroll to the div the owl carousel auto slide to the right slides. now when I arrived in the specific div I add class to the slide (active) but for some reason, I can't remove the active class from the other slides (his siblings).

I think it will be best to check the jsfiddle to understand the problem...

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

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

check https://jsfiddle.net/jt31h4pr/132/

Answer 1

The problem is that you remove/add active-link class on the same element ( this ). You need to removeClass only on the the element that already has class active-link . The class active is controlled by the plugin and all the elements that are visible have the active class

See below

 $('.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

Look into this fiddle

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

What are you doing wrong is trying to remove active class from this and then add active class to the same this , which actualy do nothing. Insted what I propose is to remove active class from all '.item' emelements and than add it to active one.

As alternative aproach you can store previous item and remove class from it, but I think first way is better.

Answer 3

Hi the problem is with below line

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

replace it with

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

This was removing and adding class on same time on all so what i did is once i am removing the class from all i am adding it on present elemnt