我在菜单上使用猫头鹰旋转木马。 当我滚动到 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);
}
});
最佳答案
问题是您在同一元素( 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>
关于javascript - 从 href 中删除兄弟类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51437164/