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

我已经给出了一个使用标签导航结构的构建设计，我使用jQuery UI的选项卡插件构建了这个结构。jQuery UI选项卡，带有两个“未选中”的阴影

到目前为止，这么好。唉，我试图为选项卡式元素本身设计风格，使得当前选定的选项卡（li.ui-tabs-selected）具有白色背景，而另外两个选项卡具有绿色背景 - 但是，这里是粘性部分，每个人都有不同的绿色阴影。

换句话说：

我有三个列表元素，全部采用一流的.ui状态默认。所选的一个被赋予额外的类.ui-tabs-selected并且是白色的;未选择的是两个绿色阴影，其中较浅的阴影总是进一步向左，并且没有两个标签具有相同的颜色（即，每个白色，深绿色和浅绿色），而不管选择哪个。 如何让两个不同颜色的非选定标签具有相同的类别？

谢谢！

来源

2011-05-11 aendrew

好吧..我现在看到它..我认为不同的阴影在未选中时仍保留在同一个标签上，但这样它们一直都在变化。 – ariel 2011-05-11 08:13:00

我想出了你的帖子中的链接;这是足够小的选项卡数量，我只是分别设置每个选项卡。 – aendrew 2011-05-11 08:21:39

完全编辑答案..这是你需要什么？ – ariel 2011-05-11 08:22:54

所以，你需要的是这样的：

$('#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，依此类推。

来源

2011-05-11 07:55:14 ariel

辉煌。谢谢！ – aendrew 2011-05-11 08:23:59

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

回答

相关问题