Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Tabs cont.^

JavaScript The first line in the first click() function applies the onclick event to all list items in the
tabs list. When onclick fires, the generic function applies removeClass() to each child of
the ancestor element that has the tabs class, except the child that contains the element that
fired the event. In this case, the removeClass() function removes the selected class from
the element. By removing this class, the left rule in the ul.tabs .tab-content selector
applies to the element (instead of the left rule in ul.tabs li.selected .tab-content)
and moves it far off the left side of the screen where it can’t be seen but can still be read by
screen readers.
The second line in the first click() function adds the selected class to the element. In the
example, I styled the selected class to override the left rule in the ul.tabs *.tab-
content so that it moves the tab-content element into the display area so the user can see
it.
The mouseover() function applies the onmouseover event to all tab-label elements inside
tab list items. When onmouseover fires, the addClass() function adds the hover class to the
element that fired the event. In the example, I styled the hover class and the hover pseudo
class to underline the element’s text.
The mouseout() function works like the mouseover, except it applies removeClass() to the
element that fired the event to remove the hover class from the element so it’s no longer
styled as being hovered over.
The second click() function captures clicks on links inside tab-label elements, hides the
focus rectangle around the link, and cancels the jump. When JavaScript is available, clicks
display tab content without loading new pages; and when JavaScript isn’t available, clicks
load pages just like the Tab Menu design pattern.

Pattern JavaScript
$('ul.tabs li').click(function(e){
$('ul.tabs li.selected').removeClass('selected');
$(this).addClass('selected');
});
$('ul.tabs li .tab-label').mouseover(function(e){
$(this).addClass('hover');
});
$('ul.tabs li .tab-label').mouseout(function(e){
$(this).removeClass('hover');
});
$('ul.tabs .tab-label a').click(function(e){
e.preventDefault();
$(this).blur();
});

Tip The tab-content element can contain any content: blocks, inlines, tables, images, objects,
and so on. This makes the Tabs design pattern a very powerful technique to make large
amounts of information in a document easy and fast to navigate without compromising
accessibility for nonsighted users.

Related to Tab Menu, Event Styling; Absolute Box (Chapter 4); Width, Height, Stretched (Chapter 5);
Margin, Border, Padding, Background, Overflow (Chapter 6); Positioned, Absolute, Relative
(Chapter 7); Offset Absolute and Offset Fixed (Chapter 8); Left Aligned (Chapter 9);
Screenreader-only (Chapter 10); Blocked, Inline Decoration (Chapter 11); Section (Chapter
13)