2011-05-11 53 views
1

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

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

换句话说:

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

谢谢!

+1

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

+0

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

+0

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

回答

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,依此类推。

+0

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