Web Development with jQuery®

Styling the Tabbed User Interface (^) ❘ 423
ul.ui-tabs-nav li {
float: left;
height: 17px;
padding: 4px 10px 0 10px;
margin-right: 5px;
border: 1px solid rgb(200, 200, 200);
border-bottom: none;
position: relative;
background: yellowgreen;
}
ul.ui-tabs-nav li a {
text-decoration: none;
color: black;
}
ul.ui-tabs-nav li.ui-tabs-active {
background: darkgreen;
border-bottom: 1px solid darkgreen;
}
ul.ui-tabs-nav li.ui-tabs-active a {
color: white;
outline: none;
}
div {
display: none;
}
The style sheet and XHTML are joined with the following JavaScript:
$(document).ready(
function()
{
$('div#exampleTabs').tabs({
active : 1
});
}
);
Figure 18-2 shows the results.

FIGURE 18-2

http://www.it-ebooks.info