jquery ui-tabs更改選定標籤背景顏色

如何使用jquery更改每行中選項卡的選定顏色的背景？因此，如果該行甚至是選定的標籤顏色始終爲紅色，並且該行爲奇數，則選定的標籤顏色爲白色。jquery ui-tabs更改選定標籤背景顏色

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

來源

2011-12-19 Juan Almonte

試試這個：

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

來源

2011-12-19 02:14:11 Indranil

類是不

.ui-tabs-selected

而是

.ui-tabs-active

來源

2014-07-30 19:03:04 esi22

jquery ui-tabs更改選定標籤背景顏色

回答

相關問題