javascript - 两个单独的 HTML 元素上的链接 'active' 状态

我正在尝试使用 jquery/javascript 镜像两个无序列表上的“事件”状态。第一个列表是 slider /轮播，第二个列表将是导航链接。

例如

<ul class="carousel">
 <li class="active">Slider 1</li>
 <li>Slider 2</li>
 <li>Slider 3</li>
 <li>Slider 4</li>
</ul>

<ul class="nav">
 <li class="active"><a href'#">Link 1</a></li>
 <li><a href'#">Link 2</a></li>
 <li><a href'#">Link 3</a></li>
 <li><a href'#">Link 4</a></li>
</ul>

所以，我们的想法是，当 <li> 处于事件状态时轮播中的变化，相应的 <li> 也会变化在“导航”列表中。

任何帮助将不胜感激。

最佳答案

我在这里创建了一个工作示例:https://jsfiddle.net/aj68mogk/14/

它在 JSFiddle 上对您不起作用，因为该脚本不会更改轮播 .active 类，这是由 wp 插件完成的。

我已经添加了一个链接来“伪造”插件执行的操作(更改轮播状态)。获取事件轮播李索引的代码部分存在错误。

所以请忽略我第一个答案的代码并采用 JSFiddle 的代码。但在您的页面上使用此功能时，请不要忘记删除虚假链接及其点击功能

接下来你必须在 JSFiddle 上选择 Jquery 版本，否则永远不会输入 $(document).ready() 函数，因为它不是纯 js。

希望这对您有所帮助，如果还有疑问，请发表评论

关于javascript - 两个单独的 HTML 元素上的链接 'active' 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35553068/