使用 unslider 将“活动”类添加到单独的菜单答案

【问题标题】：Adding "active" class to seperate menu with unslider使用 unslider 将“活动”类添加到单独的菜单
【发布时间】：2016-01-21 16:45:38
【问题描述】：

你好！

直截了当： 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>

当“幻灯片”在指定页面上时，我希望菜单项具有“活动”类...

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

我创建了一个 jsfiddle，所以人们知道我在做什么，因为我是在本地制作的。如果有人可以提供帮助，那就太好了！

【问题讨论】：

它看起来已经这样做了。无论如何，根据你的 jsfiddle。
这为幻灯片本身添加了一个活动类，我希望幻灯片外部菜单上的活动类。所以本质上：在活动幻灯片有“slide$”类的地方，找到 id 为“slide$”的导航 > 添加“活动”类 - 希望这有意义吗？

标签： javascript jquery html menu unslider

【解决方案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")
});
});

【讨论】：