jquery ui-tabs change selected tab backgound color

How can I use jquery to change the background of the selected color of the tab in each row? So that if the row is even the selected tab color is always red and if the row is odd the selected tab color is white.

<html>
 <head>
  <link src="ui.tabs.css" >
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="ui.core.js"></script>
   <script type="text/javascript" src="ui.tabs.js"></script>
  <script type="text/javascript" src="ui.tabs.paging.js"></script> 
 <script type="text/javascript">

  $(function($) {    
$('#example').tabs();   
 $('#example').tabs('paging', {
     cycle: true, follow: true } ); 
}); 
  </script>

 <style> 


body {   
 font-size: 0.8em;   
 font-family: Arial;    
}


.tabs {    
  background-color: #eee;    
   border-bottom: 1px solid #ccc;    
  list-style: none;    margin: 0;    
  padding: 10px 5px 1px 5px;    
   zoom:1; 
   }


.tabs:after {    
  display: block;   
clear: both;   
content: " ";  
 } 


.tabs li {   
float: left;    
margin: 0 1px 0 0; 
padding-left: 5px;  
}

.tabs a {   
 display: block;   
 position: relative;   
  top: 1px;   
  border: 1px solid #ccc; 
  border-bottom: 0;   
  z-index: 2;   
  padding: 2px 9px 3px;  
  color: #444;  
  text-decoration: none;  
   white-space: nowrap;
   }

.tabs a:focus, .tabs a:active { 
outline: none;  
}

.tabs a:hover, .tabs a:focus, .tabs a:active {    
background: #fff;    
 cursor: pointer; 
 }

 .ui-tabs-selected a {  
  background-color: #fff;  
  color: #000;   
  font-weight: bold;   
 padding: 2px 8px 1px;   
  border-bottom: 1px solid #fff;  
 border-top: 3px solid #fabd23;  
 border-left: 1px solid #fabd23;  
 border-right: 1px solid #fabd23;  
 margin-bottom: -1px;   
 overflow: visible;
 } 

  .ui-tabs-hide {    
   display: none;   
   background-color: #fff
   }
.ui-tabs-panel {   
padding: 0.5em;
}

.ui-tabs-paging-next {  
 float: right !important; 
   }

  .ui-tabs-paging-prev a, .ui-tabs-paging-next a {  
   display: block;  
  position: relative;  
  top: 1px;  
  border: 0;  
 z-index: 2;  
  padding: 0px;   
 color: #444;   
   text-decoration: none; 
   background: #eee; 
    cursor: pointer;
  }

     .ui-tabs-paging-next a:hover, .ui-tabs-paging-next a:focus, .ui-tabs-paging-next a:active, 
     .ui-tabs-paging-prev a:hover, .ui-tabs-paging-prev a:focus, .ui-tabs-paging-prev a:active {
     background: #eee;  }

   .ui-tabs-paging-disabled {   
    visibility: hidden;
 }

  </style> 
  </head>
   <body> 


   <table>
   <tr>
 <td>


    <div id="example">  
      <ul class="tabs">    
     <li><a href="#tab1">Tab 1</a></li>    
    <li><a href="#tab2">Tab 2</a></li>  
    <li><a href="#tab3">Tab 3</a></li>   
     <li><a href="#tab4">Tab 4</a></li>     




    </div>

   </td>
    </tr>


   <tr>
   <td>

     <div id="example2"> 

       <ul class="tabs">    
      <li><a href="#tab5">Tab 5</a></li>    
     <li><a href="#tab6">Tab 6</a></li>  
     <li><a href="#tab7">Tab 7</a></li>    <li><a href="#tab8">Tab 8</a></li>     


   </div>

    </td>
    </tr>
        </table>

    </body>
   </html>

Answers


Try this:

$('.tabs:even').find('.ui-tabs-selected a').css('background', '#000');
$('.tabs:odd').find('.ui-tabs-selected a').css('background', '#fff');

The class isn't

.ui-tabs-selected

but rather

.ui-tabs-active


Need Your Help

AsyncTask questions

android android-activity android-asynctask

I was reading things about AsyncTask. It was understandable to me, but immediately two concerns came up to my mind:

how do I test a Java SIP client?

java servlets sip asterisk asteriskami

SIP programming looks much simpler than I originally thought:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.