Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

13.4. Tabbing Through a Document

Problem

You might have a page that has quite a bit of data that all belongs together because of site architecture, as opposed to separating it into distinct pages. In such a case, instead of simply having a lengthy document with headings and paragraphs, a tabbed interface often makes better sense. In this case, the tabs work as one might expect a desktop application to function. Instead of leaving the page that you are on, the relevant information associated with each tab is brought to the forefront, as shown in Figure 13-5. One such example of this type of functionality is the Yahoo! home page.

Solution

By grabbing the href="..." of an interpage anchor link, we can use jQuery to then find the ID of the target, hide its siblings, and bring the target element into the foreground. This is by far one of the simpler applications of jQuery yet can be used to great effect.

Using tabs to help users navigate information

Figure 13-5. Using tabs to help users navigate information

Tabs—HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <title>jQuery Cookbook - Ch.13 - Tabbing Through a Document</title> <link rel="stylesheet" type="text/css" ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required