Question

我目前有一个滑块，可以自动滑动，并在活动时为导航菜单中的每个标签添加一类ui-tabs。

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

我目前只针对标签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班级

prevAll docs：

描述：获取集合中每个元素的所有前面的兄弟节点匹配的元素，可选择由选择器
过滤

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

1 个答案: