DHTML Tabs Tutorial

Getting Started

Setting up Tabs is easy.

The easiest way to learn how to use Tabs is to modify the HTML and CSS in the demos. All of the colors, borders, and fonts can be easily changed right in the CSS file. To change the behavior, modify the TabParams object.

If you have not already done so, download the package and save a duplicate copy.

This tutorial is divided into sections:

1. Ingredients - what you need to make DHTML Tabs
2. HTML Structure - explains the structure that the demos use
3. Using Images - how to use images for tabs
4. Modifying the TabParams - Simple setup paramters for your TabSystems
5. Modifying the CSS
6. Using Keyboard Events to trigger tabs
7. Tab Navigation
8. TabSystem API Reference - onbeforechange, onchange, setEventType, removeTabs
9. Frequently Asked Questions

Support

If you have problems with Tabs, contact support.

About the Sourcecode

In order to minimize file size, whitespace has been removed from tabs.js. The file contents global.js and cookie.js have included in tabs.js (without whitespace). This reduces download time by reducing the number of HTTP transactions and by reducing the file size by over 30%.

Human readable source-code is available in the zip file.

Next in this tutorial: The ingredients: Putting the HTML, CSS, and JavaScript into the HTML