Question

如何使用jquery更改每行中选项卡所选颜色的背景？因此，如果行是偶数，则选定的选项卡颜色始终为红色，如果行为奇数，则选定的选项卡颜色为白色。

<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>

Answer 1

试试这个：

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

Answer 2

班级不是

.ui-tabs-selected

而是

.ui-tabs-active

jquery ui-tabs更改选定的选项卡背景颜色

2 个答案: