javascript - 将 "active"类添加到带有取消 slider 的单独菜单

Question

你好!

说到重点: https://jsfiddle.net/andeh/adjgnjyb/2/

<div class="slider">
<ul>
    <li class="slide slide1">
        slide 1
    </li>
    <li class="slide slide2">
        slide 2
    </li>
    <li class="slide slide3">
        slide 3
    </li>
</ul>
</div>
<nav class="menu">
<ul>
    <li id="slide1">item1</li>
    <li id="slide2">item2</li>
    <li id="slide3">item3</li>
</ul>
</nav>

当“幻灯片”位于指定页面上时，我想让菜单项具有“事件”类...

即该页面有一个整页 slider ，上面有 3 个部分，所有部分都与菜单项相关。当它从“关于我们”变为“加入我们的团队”时，它将突出显示相关的菜单项...

我创建了一个 jsfiddle，这样人们就知道我在做什么，就像我在本地制作的一样。如果有人能提供帮助，那就太好了!

Answer 1

unslider 还为您提供了向其附加事件的选项，尽管这些事件是同步的，因此不要在其中添加阻塞代码。

https://jsfiddle.net/adjgnjyb/4/

$(document).ready(function() {
var slider = $('.slider').unslider({
    autoplay: true,
    delay: 5000
});
slider.on('unslider.change', function(event, index, slide) {
   $("#slide1, #slide2, #slide3").removeClass("active")
   $("#slide" + (index + 1)).addClass("active")
});
});