Loading Remote Content via AJAX (^) ❘ 427
}
div#ui-tabs-1 {
background: pink;
padding: 5px;
}
.ui-tabs-hide {
display: none;
}
ul.ui-tabs-nav {
list-style: none;
padding: 0 ;
margin: 0 ;
height: 22px;
border-bottom: 1px solid darkgreen;
}
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.ui-tabs-panel {
display: none;
}The JavaScript has no changes from Example 18-2 because the bits that enable AJAX loading occur
entirely in the markup and in the Tabs plugin.
$(document).ready(
function()
{
$('div#exampleTabs').tabs({
active : 1
});
}
);Figure 18-3 shows the results.