HTML and CSS Reference
In-Depth Information
provides the styles. All three divisions are hidden by the rule
display: none;
. his
will be changed for the irst division by some JavaScript when the page loads.
Setting the
position
property to “absolute” frees the three divisions from
the content low, allowing them to ind their new common location, with
respect to the tabbed section container. A width is given for the division ele-
ments as a percentage of the “tabbed” section's width. Otherwise, they would
extend to the window's right margin. A negative number for the
z-index
property allows other content—the bottom border of the labels—to cover these
divisions.
he JavaScript code in Example 5.6c deines the two functions
setTab
and
showTab
, which are called by the
onclick
attributes in the tab labels, plus a
jQuery statement to initialize the irst tab. he JavaScript functions use the
jQuery library to make it easy to address the elements using their CSS selec-
tors. he jQuery methods
show
and
hide
are perfect for applications like this.
he irst line of Example 5.6c loads in the jQuery library from Jquery.com's
API server. Alternatively, you can download the library and reference it from
your own website. Loading it from an external source let's you test the code on
your local computer.
example 5.6c: JavaScript and jQuery functions for tabbed content
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// Set the active tab
function setTab(me) {
$('#tabs a').css('border-bottom-color', 'black');
// reset all
$(me).css('border-bottom-color',
$(me).css('background-color'));
// set label
$(me).blur();
// lose your focus
}
// Show the selected division
function showTab(tab) {
$('#tabbed div').hide();
// hide all divisions
$(tab).show('slow');
// show active division
}
