DHTML Example: Tabbed Interface

By Joe Burns

http://www.htmlgoodies.com/beyond/dhtml/article.php/3470511/DHTML-Example-Tabbed-Interface.htm (Back to article)

DHTML Code is public domain posted on the Microsoft DHTML Example Page

How about this? Want one? Click on Tab 2 to go on.
     This is a great DHTML item. I almost wish I knew how to make seven different meals so I could use this like my Mom's old recipe box. My cooking skills span the gamut from pancakes to bigger pancakes. On the last tab, I will give you my world famous recipe for pancakes, Burns-style.

     This is a great way to move people along from section to section. In addition, the text on the tags work just like any other HTML text. You can put in images, links, or just about anything you could put on a traditional HTML document. The sizzle in this is its ability to organize and present information, more so than its ability to change text.

     Even better is that this script is not locked into shape. The tabs will grow as you need more room. But only the tab that needs to grow will grow. The other tabs will remain only as large as needed.

     Go to Tab 3 to continue....

Get The DHTML Script

     I have the entire script in text format. It's in the form of an HTML document, ready to go. Now, Explorer sometimes has trouble displaying the text. Usually it just compiles the text as if it were an HTML document. If that happens, then just download the page or copy and paste the View Source. Either way will get you the DHTML script.

Open text file in this browser window Open text file in new browser window

     For more information on this DHTML script and answers to other of life's questions, go to Tab 4.

Putting Information On The Tabs

     If you like this look, if the way this setup looks is okay by you, then it's really easy from this point on out because this pup is ready to go. At the very bottom of the DHTML script you just downloaded is this:

<DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV>
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>

     Those are the tabs. Note each one has the comment "This text is on...". That's where you put the text that will appear on the tab. As long as what you write stays between the DIV and the /DIV commands, then it will all appear on the tab. Easy. Take a look at the source code of this tutorial to see how I handled it, if you'd like.

     On to Tab 5...

Altering The Look

     This one is pretty well set in stone as far as what it does. However, you can alter its appearance a bit. The first place to attack is the style sheet section right at the top. There are two sections:
     The commands are all in a style sheet format. If you're not familiar with the format, see my Cascading Style Sheet tutorial.

     And then there's...

Altering The Size Of The Tabs

     Right under the BODY command, you find a command for DIV and TABLE. Both of those also include style sheet commands that denote the size of the tabs. Change them around to your heart's content.

     You can change the color of the background around the tabs by changing the bgcolor color code in the BODY command. The color of tabs themselves can be set by changing the bgcolor code in the table.

     So, use this in good health. I think it's a great look for a Web page that has to offer a bunch of short, quick pieces of information.

     Now off to Tab 7 and my recipe....

How To Make Pancakes Like Joe Burns

Follow these steps: