javascript - jQuery UI Tabs with two shades of "not selected" -
i've been given design build uses tabbed navigation structure, i've built far using jquery ui's tabs plugin.
so far, good. alas, i'm trying style tabbed element such selected tab (li.ui-tabs-selected) has white background , 2 other tabs have green background -- but, , here's sticky part, each has different shade of green.
put way:
i have 3 list elements, class .ui-state-default. selected 1 given class .ui-tabs-selected , white; unselected ones 2 shades of green, lighter shade further left, , no 2 tabs same colour (i.e., 1 each of white, dark green , light green), regardless of selected. how make non-selected tabs 2 different colours when both have same classes?
thanks!
so, need this:
$('#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)); } });
the class tab0 selected tab, tab1 1 next it, , on.
what every time tab selected, remove classes li , add 1 based on (ui.index - count). 0 if ui.index = count (the selected tab 1 handling), 1 if distance 1, , on.
Comments
Post a Comment