CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-tabs
aendra
aendra

Reputation: 5346

jQuery UI Tabs with two shades of "not selected"

I've been given a design to build that uses a tabbed navigation structure, which I've built thus far using jQuery UI's tabs plugin.

So far, so good. Alas, I'm trying to style the tabbed element itself such that the currently selected tab (li.ui-tabs-selected) has a white background and the two other tabs have a green background -- but, and here's the sticky part, each has a different shade of green.

Put another way:

I have three list elements, all with class .ui-state-default. The selected one is given the extra class .ui-tabs-selected and is white; the unselected ones are two shades of green, with the lighter shade always further to the left, and no two tabs the same colour (i.e., one each of white, dark green and light green), regardless of which is selected. How do I make the non-selected tabs two different colours when they both have the same classes?

Thanks!

Upvotes: 1

Views: 437

Answers (1)

ariel
ariel

Reputation: 16150

So, what you need is 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 is for the selected tab, tab1 for the one next to it, and so on.

What this does is every time a tab is selected, remove all classes from the li and add one based on the (ui.index - count). This is 0 if ui.index = count (the selected tab is the one we are currently handling), 1 if the distance is 1, and so on.

Upvotes: 1

Related Questions