tailieunhanh - HTML cơ bản - p 27

244 Chapter 5: Building Websites provides the styles. All three divisions are hidden by the rule display: none;. This will be changed for the first division by some JavaScript when the page loads. Setting the position property to “absolute” frees the three divisions from the content flow, allowing them to find their new common location, with respect to the tabbed section container. A width is given for the division elements 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. | 244 Chapter 5 Building Websites provides the styles. All three divisions are hidden by the rule di spl ay none . This will be changed for the first division by some JavaScript when the page loads. Setting the position property to absolute frees the three divisions from the content flow allowing them to find their new common location with respect to the tabbed section container. A width is given for the division elements 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. The JavaScript code in Example defines the two functions setTab and showTab which are called by the oncl ick attributes in the tab labels plus a jQuery statement to initialize the first tab. The JavaScript functions use the jQuery library to make it easy to address the elements using their CSS selectors. The jQuery methods show and hide are perfect for applications like this. The first line of Example loads in the jQuery library from 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 JavaScript and jQuery functions for tabbed content script src http 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 tab .show slow hide all divisions show active division From the Library of Wow eBook Organization and Navigation 245 Activate the first tab document .ready function showTab tab1 setTab tabs a first script wait til the DOM is ready display the first tabbed area make the first label active The basic idea is to reset all