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.