Is there a way to add an individual color for each tab in jquery ui 1.7?
I want the first li to be red, 2nd to be yellow, 3rd so forth..
Thanks.
Steve
Update:
I've added the following code but is there a cleaner way to do it? Also the first li is selected when the page loads but how do i get the event to fire as soon as the page loads so the color will be shown?
- $(function() {
$("#tabbed-content").tabs({ event: 'click' });
$('#tabbed-content').bind('tabsselect', function(event, ui) {
if (ui.index == 0) {
$('#test-1').css({'background-image' : 'none', 'background-color' : '#ff6666', 'font-weight' : 'bolder'});
$('#tabbed-content ul:first li:not(#test-1 )').css({'background-image' : 'images/ui-bg_glass_75_e6e6e6_1x400.png', 'background-color' : '#E6E6E6'});
}
if (ui.index == 1) {
$('#test-2').css({'background-image' : 'none', 'background-color' : '#669900', 'font-weight' : 'bolder'});
$('#tabbed-content ul:first li:not(#test-2)').css({'background-image' : 'images/ui-bg_glass_75_e6e6e6_1x400.png', 'background-color' : '#E6E6E6'});
}
});
}); - <div id="tabbed-content">
<ul style="font-size: .8em">
<li id="test-1"><a href="#tabs-1">Understanding Self</a></li>
<li id="test-2"><a href="#tabs-2">Exploring Careers</a></li>
<li id="test-3"><a href="#tabs-3">Making Decisions</a></li>
<li id="test-4"><a href="#tabs-4">Finding Employment</a></li>
</ul>