Javascript jQuery UI选项卡带有两个深浅的"；“未选定”；

我得到了一个使用选项卡式导航结构的设计来构建，到目前为止，我已经使用jQueryUI的选项卡插件构建了该结构

到目前为止，一切顺利。唉，我正在尝试设置选项卡式元素本身的样式，以便当前选择的选项卡（li.ui tabs selected）具有白色背景，而其他两个选项卡具有绿色背景——但是，这里是粘性部分，每个选项卡都具有不同的绿色阴影

换句话说：

我有三个列表元素，都是class.ui状态默认值。选中的一个被赋予了额外的类。ui选项卡被选中并且是白色的；未选择的选项卡为两种绿色，较浅的阴影始终位于左侧，并且没有两个选项卡具有相同的颜色（即白色、深绿色和浅绿色各一个），无论选择了哪个选项卡如果未选择的选项卡具有相同的类别，如何使它们具有两种不同的颜色？

---

谢谢

那么，您需要的是：

$('#tabs').bind('tabsselect', function(event, ui) {
    $('#tabs ul li').each(function(count) {
        $(this)
            .removeClass('tab0 tab1 tab2 tab3 tab4')
            .addClass('tab' + abs(ui.index - count));
    }
});

类tab0用于选定的选项卡，tab1用于其旁边的选项卡，依此类推

---

这样做的目的是每次选择一个选项卡时，从li中删除所有类，并根据（ui.index-count）添加一个类。如果ui.index=count，则为0（所选选项卡是我们当前正在处理的选项卡），如果距离为1，则为1，依此类推。

因此，您需要的是：

$('#tabs').bind('tabsselect', function(event, ui) {
    $('#tabs ul li').each(function(count) {
        $(this)
            .removeClass('tab0 tab1 tab2 tab3 tab4')
            .addClass('tab' + abs(ui.index - count));
    }
});

类tab0用于选定的选项卡，tab1用于其旁边的选项卡，依此类推

---

这样做的目的是每次选择一个选项卡时，从li中删除所有类，并根据（ui.index-count）添加一个类。如果ui.index=count，则为0（所选选项卡是我们当前正在处理的选项卡），如果距离为1，则为1，依此类推。

ok。。我现在明白了。。我原以为不选中时，不同的颜色会保留在同一个标签上，但这样它们就会一直变化；这是一个足够小的选项卡数量，我只需分别设置每个选项卡。。这就是您所需要的吗？我使用了一些代码（来自您先前答案中的链接），其工作方式与您的略有不同，并根据tabindex显式设置了一些值；然而，尽管做了同样的事情，你的解决方案要优雅得多，因此我接受了它作为我的答案。谢谢好啊我现在明白了。。我原以为不选中时，不同的颜色会保留在同一个标签上，但这样它们就会一直变化；这是一个足够小的选项卡数量，我只需分别设置每个选项卡。。这就是您所需要的吗？我使用了一些代码（来自您先前答案中的链接），其工作方式与您的略有不同，并根据tabindex显式设置了一些值；然而，尽管做了同样的事情，你的解决方案要优雅得多，因此我接受了它作为我的答案。谢谢