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.
By grabbing the
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.
Figure 13-5. Using tabs to help users navigate information
<!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" ...