Practical Internet Groupware

Implementing HTML Tabbed Indexes

Let’s start with a more complete definition of a tabbed index. It’s a software widget that emulates an old-fashioned address book. The labels on the tabs can be letters of the alphabet, subject titles, or symbols. Each tab leads to a page that groups like elements—all reports that were written by Jon Udell, or that pertain to Microsoft, or that were due in August 1998.

Any implementation of a tabbed index in HTML exemplifies a pattern that I call repeat and vary. The element that repeats is a row of labeled links that I’ll call active tabs. The element that varies is the treatment applied to the current tab—that is, the single item that is not a link and whose nonlinked status signifies the current location in the data set.

In Figure 7.3, the current tabs are company and N. Together they signify that the page lists reports about products from companies whose names begin with N. Figure 7.5 shows what happens when you click the M tab. To signal the transition to the M state, the tabbed index undergoes two changes. The N tab gains link status and joins the rest of the active tabs. The M tab leaves the set of active tabs, loses link status, and takes on the big, bold style that signifies the current tab.

Figure 7-5. Tabbed index by company, after transition to the M page

What makes this seem magical is a kind of figure-and-ground effect. The set ...