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
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.
Search WWH ::

Custom Search