Question

我已经获得了一个使用标签式导航结构的设计，到目前为止我使用jQuery UI的标签插件构建了这个结构。

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

换句话说：

我有三个列表元素，都是类.ui-state-default。所选择的一个被赋予额外的类.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用于选定的选项卡，tab1用于旁边的选项卡，依此类推。

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

jQuery UI选项卡有两个“未选中”的阴影

1 个答案: