(^424) ❘ CHAPTER 18 TABS
In Figure 18-2, you can see that the tabs are laid out in a manner that’s more consistent with what
you might expect from a tabbed UI. With the addition of the active option with the value of 1 ,
the second content panel is visible by default when the page loads. The active option toggles the
selected tab, counting from zero.
The class name ui-state-active references the selected tab. The class name ui-state-hover refer-
ences the tab the mouse cursor is hovering over. Both class names are applied to the
that eventually become tabs.
When you click the labels in the
- element, you toggle between the different content panels.
Making tabs requires some structural rules. First, you have a list of items, and in that list you have
hyperlinks to anchors.
In the preceding snippet of markup, each hyperlink links to an anchor that appears elsewhere in the
document, by including a pound sign, followed by that element’s id name. Structuring the document
in this way makes your scripting unobtrusive. If scripting is disabled, the user can still navigate the
tabs by clicking a link to an anchor, instead of toggling the display of a content pane.
Following the list, you have three
anchor link, which makes those elements anchors.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse id sapien. Suspendisse rutrum libero sit amet dui.
Praesent pede elit, tincidunt pellentesque, condimentum nec,
mollis et, lacus. Donec nulla ligula, tempor vel, eleifend ut.
When you call the tabs() method, jQuery looks at the list and automatically pulls the id names
from the hyperlinks.
[http://www.it-ebooks.info](http://www.it-ebooks.info)