带有两种“未选择”阴影的 jQuery UI 选项卡答案

【问题标题】：jQuery UI Tabs with two shades of "not selected"带有两种“未选择”阴影的 jQuery UI 选项卡
【发布时间】：2011-05-11 07:53:38
【问题描述】：

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

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

换一种说法：

我有三个列表元素，都具有类 .ui-state-default。被选中的被赋予额外的类 .ui-tabs-selected 并且是白色的；未选择的是两种绿色，较浅的阴影始终在左侧，并且没有两个相同颜色的选项卡（即，白色、深绿色和浅绿色各一个），无论选择哪个。 当它们都具有相同的类时，如何使未选择的选项卡具有两种不同的颜色？

谢谢！

【问题讨论】：

好的..我现在看到了..我认为未选中时不同的色调会保留在同一个选项卡上，但这样它们会一直在变化。
感谢您在帖子中提供的链接，我明白了；这是一个足够少的选项卡，我只是单独设置每个选项卡。
完全编辑了答案..这是你需要的吗？
我使用了一些代码（来自您之前答案中的链接），它们的工作方式与您的略有不同，并根据 tabindex 显式设置了一些值；然而，尽管做了同样的事情，你的解决方案却更加优雅，因此我接受了它作为我的答案。谢谢！

标签： javascript jquery css jquery-ui jquery-ui-tabs

【解决方案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，依此类推。

【讨论】：