Sample: Tabbed Panes

Demonstration:

Description:

In terms of implementation, this is no different from the master/detail sample we've already seen. The main difference is in styling the tabs to look like tabs instead of a more traditional list.

Note that most tab implementations out there produce the tabbed pane look but go back to the server to fetch the tab body. This sample actually contains all the content on the page and toggles the visibility of the content corresponding to the selected tab.

If you think about the way the web was before CSS, pages were very bloated, to a large extent due to liberal use of images for text and buttons. A properly-designed page today may easily become a fraction of its former size. Why not trade off a little of that waste for a little additional content on the page?

I'd like to include a related quote from Hakon Wium Lie here:

..the preponderence of images as a substitute for attractive type can account for much of the reputed slowness of the Web to respond when drawing pages on screens.

References

[tbd]