具有两种"not selected"阴影的 jQuery UI 选项卡

Question

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

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

换句话说：

我有三个列表元素，所有元素都具有 .ui 状态默认值类。选定的一个被赋予额外的类 .ui-tabs-selected 并且是白色的;未选择的标签是两种绿色阴影，较浅的阴影总是更靠左，并且没有两个选项卡的颜色相同（即白色、深绿色和浅绿色各一个），无论选择哪个。当未选择的选项卡具有相同的类时，如何使它们具有两种不同的颜色？

谢谢！

Answer 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 用于所选选项卡，选项卡 1 用于它旁边的选项卡，依此类推。

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