jQuery Forum

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?

1.     $(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'});
       
       }
   });
      
       });
2.     <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>