DHTML Tabs

The HTML Structure

If it were possible to make it in XML, it would look like this:

<content id='[uniqueId]'>
    <tabs>
        <tab active='true' id='tab1a'>[tab 1a text]</tab>
        <tab id='tab1b'>[tab 1b text]</tab>
        <tab id='tab1c'>[tab 1c text]</tab>
        <tab id='tab1d'>[tab 1d text]</tab>
    </tabs>
    <content id='content1a'>
    	[content 1a contents here]
    </content>
    <content id='content1b'>
    	[content 1b contents here]
    </content>
    <content id='content1c'>
    	[content 1c contents here]
    </content>
    <content id='content1d'>
    	[content 1d contents here]
    </content>
</content>

Note: the square brackets, "[ ]" denote variable text or markup.

Tab and Content ids

Do you see how the id for tab and content elements correspond? Notice how tab1a corresponds to content1a, et c.

HTML Translation

Since we can't really use XML in browsers, we have to resort to clever use of the class attribute.

Any tag can be used for tab. div is used for content and tabs. The class attribute is set to the element's would-be XML tag name.

Thus, the translation would appear:

<div id='uniqueId' class='content'>
    <div class='tabs'>
        <span id='tab1a' class='tab tabActive'>tab 1a text</span>
        <span id='tab1b' class='tab'>tab 1b text</span>
        <span id='tab1c' class='tab'>tab 1c text</span>
        <span id='tab1d' class='tab'>tab 1d text</span>
    </div>
    <div id='content1a' class='content'>
    	content 1a contents here
    	[Nested tabsystem may go here]
    </div>
    <div id='content1b' class='content'>
    	content 1b contents here
    </div>
    <div id='content1c' class='content'>
    	content 1c contents here
    </div>
    <div id='content1d' class='content'>
    	content 1d contents here
    </div>
</div>

Setting the Active Tab

The active tab is set by the class attribute to tab tabActive.

Multiple Class Names in HTML

w3c Factoid: In case you didn't know, multiple class names, separated by whitespace, may be used. See chapter 7 of the HTML 4.01 specification, The global structure of an HTML document.

Nested Tab Systems

The structure of the tabsystem design allows for easy nesting of tabsystems.

Notice that the outermost "container" element is a content. To nest tabsystems, use one of the inner content divs (content1a, for example) as the nested tabsystem's container.

Next in this tutorial: Using Images for tabs