Вкладки пользовательского интерфейса jQuery с двумя оттенками «не выбран» - PullRequest
Новая
       14

Вкладки пользовательского интерфейса jQuery с двумя оттенками «не выбран»

1 голос
/ 11 мая 2011

Мне дали проект для сборки, который использует структуру навигации с вкладками, которую я построил до сих пор, используя плагин jQuery UI tabs.

Пока все хорошо.Увы, я пытаюсь стилизовать сам элемент с вкладками так, чтобы текущая выбранная вкладка (li.ui-tabs-selected) имела белый фон, а две другие вкладки - зеленый фон, но вот липкая часть,каждый из них имеет свой оттенок зеленого.

Другими словами:

У меня есть три элемента списка, все с классом .ui-state-default.Выбранному дается дополнительный класс .ui-tabs-selected и он белый;невыбранными являются два оттенка зеленого, причем более светлый оттенок всегда дальше влево, и нет двух вкладок одного цвета (т. е. по одному на каждый, белого, темно-зеленого и светло-зеленого), независимо от того, какой из них выбран. Как сделать невыбранные вкладки двух разных цветов, если они имеют одинаковые классы?

Спасибо!

1 Ответ

1 голос
/ 11 мая 2011

Итак, что вам нужно, это: 

$('#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). Это 0, если ui.index = count (выбранная вкладка - та, с которой мы сейчас работаем), 1, если расстояние равно 1, и т. Д.

...