1

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>

2 Answers 2

1

Try this:

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

The class isn't

.ui-tabs-selected

but rather

.ui-tabs-active

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.