Create A Tabbed User Interface
By Tom Duffy, DHTML Pro

I've been doing some Holiday Shopping online this year and I noticed that many of the Web sites I visited used a tabbed metaphor to present their merchandise. Tabbed interfaces let you present a great deal of information without "changing pages." But it isn't immediately apparent exactly how tabbed interfaces work.



Problem: How do you create a tabbed user interface?



Solution: Combine a few style sheet rules and some simple JavaScript routines to maintain the tab state!

  
Next: Design a Tabbed Interface


Introduction Design a Tabbed Interface
Activate the Tabs Use IFRAMES for External Content


Return to Get Help with DHTML Page

Return to Main Get Help Page
 






Find Out More
Get the Code

Microsoft Windows Script Technologies

Essential JavaScript

Test the sample code (internal content)

Test the sample code (external content)
TALK BACK
Do you like tabbed interfaces? Did you think you had to create complicated script or use controls to implement tabbed interfaces? Can you think of ways to improve the article code? Join the discussions at Web.dhtml.general and Web.dhtml.scripting to get answers, make comments, or help others with their problems.
Talk Now


Sponsored Links