DHTML Example: Tabbed Interface
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.
Go to Tab 3 to continue....
Get The DHTML ScriptI 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.
For more information on this DHTML script and answers to other of life's questions, go to Tab 4.
Putting Information On The TabsIf 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 LookThis 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:
- .tab: This is the look of the tabs that aren't chosen.
- .selTab: This is the look of the selected tab.
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 TabsRight 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
- Saturday morning: Buy Bisquick, eggs, milk, and a large black coffee at the 7-11.
- Drink milk from carton on way home.
- Pre-heat oven for no particular reason.
- Misread the pancake instructions on side of box. Make batter for muffins instead.
- Proclaim to the cat that the cooking will now begin. Wife is still asleep.
- Pour batter on heavily Pam'ed skillet, too small with which to make pancakes.
- Realize skillet is not hot.
- Turn off oven, turn on stove.
- Again proclaim to the cat that the cooking will now begin.
- Pour batter, drip on stove, and try to wipe up with finger. Burn self.
- Curse (repeat as needed).
- Turn on overhead fan as smoke gets thicker.
- Attempt to silence the fire alarm by saying "Shhhhh!"
- Pull skillet off stove, drop, narrowly miss cat.
- Ask wife what she's doing up so early.
- Realize further failure is the only future.
- Get in car with wife.
- Get back out of car to turn off stove.
- Go to local pancake house.
- Order pancakes.