HTML and CSS Reference
In-Depth Information
// Activate the first tab
$(document).ready( function () {
// wait til the DOM is ready
showTab('#tab1');
// display the first tabbed area
setTab($('#tabs a:first'));
// make the first label active
});
</script>
he basic idea is to reset all labels or tabs and then set or show the selected
one. here are other ways to approach this problem. For example, a global
variable can be set by the function that keeps track of which tab is the cur-
rently active one. A JavaScript function running in an HTML5-capable
browser can set local and session storage items to keep track of the active tab
settings in between page visits. he code matters less than the fact that it takes
so little of it to achieve the objective.
he
setTab
function takes as its single argument the anchor element object
that called it, which is referred to as me inside the function. he irst line of the
function resets all the labels by restoring the bottom border. he second line
sets the bottom border color of
me
to its background color, efectively making
that line disappear. he
blur
method, in the third line, removes any highlight-
ing the browser may have added, such as a dotted border, to the tab label when
it was clicked.
he
showTab
function takes the tabbed division's
id
selector as its argument.
he irst line hides all the divisions using jQuery's
hide
method. he second
line applies the
show
method to the selected division. he show method is ani-
mated by giving it the
'slow'
argument. As with Example 5.5, this provides the
visual sense of one section of content replacing another. And, although this
pleasing efect cannot be demonstrated on paper, I hope you enjoy the beauti-
ful photograph in Figure 5.6, which was taken by Heidi Cohen and used with
her kind permission.
Script
elements can go anywhere in an HTML ile. Small JavaScript func-
tions, like those used in the preceding example, can be collected into the cen-
tral script ile, functions.js, so that they can be accessed easily in other pages.
Script
elements can also be placed in the body of an HTML page, making it
possible to use variations of these techniques in blog pages and other content
management systems.
