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

Question

我目前有一个滑块，当它处于活动状态时，它会自动滑动，并向导航菜单中的每个选项卡添加一组ui-tabs。

我想要的是将选定的类（ui-tabs-selected）添加到其他当前不活动的元素。例如，我有5个导航选项卡，标记为1到5，如果3是活动的，我想1和2具有UI选项卡选定的类。如果选择4，我希望1,2和3具有选定的UI选项卡等等。

我目前一直在测试它只是选项卡1和2，但似乎无法得到它的工作，我添加了一个if else addClass未选中，即使＃nav-fragment-2已经返回选择类的ui-tabs选项显示我的代码内有问题，或者我正在做的事情是完全错误的方式:)

我已经在下面发布了我的代码，目前使用的是带有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> 

的导航菜单：

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

prevAlldocs：

描述：获取集合中每个元素的所有前面的兄弟元素o f 匹配的元素，可选通过选择器进行过滤