在滑块选项卡中选择选定的导航项并添加类

Question

我目前有一个滑块，自动幻灯片，并添加了一个类别的ui-选项卡-选择到导航菜单中的每个选项卡时，它是活动的。

我想要的是将所选的类(ui选项卡- selected )添加到其他当前未活动的元素中。例如，我有5个导航标签标签为1至5，如果3是活动的，我希望1和2有ui选项卡选择的类。如果选择了4，我希望1、2和3选择ui选项卡，等等。

目前，我只对选项卡1和2进行了测试，但似乎无法让它正常工作，我添加了一个if there not-selected，即使#nav-片段-2有ui选项卡的类(这表明我的代码中有错误的地方，或者我正在以完全错误的方式进行操作，也会返回该选项卡:)

我已经在下面发布了我的代码，目前使用的jQuery特色内容滑块与ui。

<script type="text/javascript">
$(document).ready(function(){
    $(".ui-tabs-nav").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    if ( $('#nav-fragment-2').hasClass('ui-tabs-selected') ) {
$('#nav-fragment-1').addClass('.ui-tabs-selected');
} else {
$('#nav-fragment-1').addClass('no-selected');
}
});

</script>

导航菜单：

<ul class="ui-tabs-nav">
    <li class="nav-item tk-report" id="nav-fragment-1"><a href="#fragment-1"><img   src="{site_url}assets/images/main/how-1.png" width="28" height="28" alt="" /><span>1</span></a></li>
    <li class="nav-item tk-report" id="nav-fragment-2"><a href="#fragment-2"><img src="{site_url}assets/images/main/how-2.png" width="28" height="28" alt="" /><span>2</span></a></li>
    <li class="nav-item tk-report" id="nav-fragment-3"><a href="#fragment-3"><img src="{site_url}assets/images/main/how-3.png" width="28" height="28" alt="" /><span>3</span></a></li>
    <li class="nav-item tk-report" id="nav-fragment-4"><a href="#fragment-4"><img src="{site_url}assets/images/main/how-4.png" width="28" height="28" alt="" /><span>4</span></a></li>
    <li class="nav-item tk-report" id="nav-fragment-5"><a href="#fragment-5"><img src="{site_url}assets/images/main/how-4.png" width="28" height="28" alt="" /><span>5</span></a></li>
</ul>

编辑：

 <script type="text/javascript">
$(document).ready(function(){
    $(".ui-tabs-nav").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$('.nav-item.tk-report.ui-tabs-selected').prevAll().addClass('.ui-tabs-selected');
});

</script>

Answer 1

只需一行代码即可完成。使用jQuery prevAll函数：

$('.nav-item.tk-report.ui-tabs-selected').prevAll().addClass('ui-tabs-selected');

此代码将选择具有以下三个类的元素：

nav-item + tk-report + ui-tabs-selected然后遍历到他的兄弟姐妹，并将他们添加到ui-tabs-selected类

prevAll 文档

描述:获取匹配元素集合中每个元素的所有前面的兄弟姐妹，可以选择由选择器筛选。