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

我目前有一个滑块，它可以自动滑动，并在导航菜单中的每个选项卡处于活动状态时添加一类选定的ui选项卡

我想要的是将所选类（所选ui选项卡）添加到当前未激活的其他元素中。例如，我有5个标记为1到5的导航选项卡，如果3个处于活动状态，我希望1和2在类中选择ui选项卡。如果选择4，我希望选择1、2和3的ui选项卡，以此类推

我目前只对选项卡1和2进行了测试，但似乎无法使其正常工作，我添加了一个if-else addClass not selected，即使#nav-fragment-2选择了ui选项卡类，这表明我的代码中存在错误，或者我的操作方式完全错误，这也会返回：）

我已经在下面发布了我的代码，目前正在使用带有用户界面的jQuery特色内容滑块

<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>

$（文档）.ready（函数（）{
$（“.ui tabs nav”）.tabs（{fx:{opacity:{toggle:}}）.tabs（“旋转”，5000，真）；
if（$（'#nav-fragment-2'）.hasClass（'ui-tabs-selected'））{
$（'#nav-fragment-1'）.addClass（'.ui选项卡已选定'）；
}否则{
$（'#nav-fragment-1'）.addClass（'no-selected'）；
}
});

导航菜单：

<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>

编辑：

<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>

$（文档）.ready（函数（）{
$（“.ui tabs nav”）.tabs（{fx:{opacity:{toggle:}}）.tabs（“旋转”，5000，真）；
$（'.nav item.tk report.ui tabs selected'）.prevAll（）.addClass（'.ui tabs selected'）；
});

只需一行代码即可完成。使用jQuery

prevAll

功能：

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

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

nav项

+

tk报告

+

ui选项卡选中

然后遍历到其兄弟，并将其添加到所选的

ui选项卡

类中

prevAll

：

描述：获取集合中每个元素的所有前面的同级 匹配的元素，可选地由选择器过滤

---

谢谢你的快速回复。我现在明白你的意思了。我已经在我的代码中输入了js，但是仍然没有发生任何事情，选择的选项卡仍然可以正常工作，但是没有将u-tabs-selected类添加到前面的选项卡中。我已经用我的新js编辑了上面的代码。Thanks@Ben. 我在类名中写了

：

addClass（'.ui-tabs-selected'）

=>

addClass（'ui-tabs-selected'）

我现在修复了它。希望它能做到这一点。我尝试了你的建议，但结果都一样：/。不确定这是否与选中的jQuery ui类有关。是否值得尝试使用自定义js创建一个不同的类并使用它？如果有的话，有什么建议吗？@Ben。我不能帮助你而不看到问题，请给我一个链接到你的网站或一个更好的JSFIDLE。你仍然有困难吗？