For Navigation: Cursor =====>

A frequent problem in Online Communication is, how to present a bunch of information user-friendly yet impressively. And, after all, it should be easy to implement. A Tabs control is a good way to do that. Here you will see how to do that, from the very basics up to a quite elaborate Tabs control.

One important aspect of Online Communication is not only to give some pieces of information to the users, but also to convey to them your wealth of it. To do that, it would be no good just to write them down one after another: the users would quickly lose the overview. (Your users would feel overwhelmed then: "Well, it was quite a lot of information, but I could not see anything interesting to me personally.")

That's the idea of usability: Whatever the information you have to offer, it's just not useful to your readers to overwhelm them. Find a way to give only a few indications of what you have to offer, and leave it to the readers which parts to select.

If possible, your information should be presented such that your users feel invited to read whatever you've got for them, and to "drill down" to the things most interesting to them. Obviously, it should be easy to "drill down", requiring just one or two mouse clicks.

And, let's not forget: The main part of your effort should be devoted to providing the information itself. There's no point in presenting a tiny piece of information gorgeously. Just because you needed most of your time to lay it out perfectly, leaving only a short time for jotting down what you wanted to tell your readers.

A good tool to achieve that effect is the Tabs tool: All your pieces of information are put together to a handful of categories. Each category makes a "Tab" of its own, similar to the pages in a tab register file in the office. (You will probably have experienced a Tabs control already, in my archive, before you came here.)

As always, let me ask you: Please do spy on the source code! You might sometimes wonder if a demo was really implemented as said or if there was any trick at the bottom of it. To do that, you are explicitly asked to right-click anywhere on your browser and to click "View Source" in the context menu.

Basic Structure

The simplest thing you can do to implement a Tabs control is a series of DIVs like the following:

Try it yourself: Click on any of the Tabs. The corresponding Contents will be displayed. If there were any other Contents displayed before, it will disappear.

Within the brackets <DIV ID="tab." … >Contents.</DIV> may be any HTML code you like: text, images, etc.

You can use that to display a mass of information, categorized to the user's discretion. Very user-friendly: The users are not forced to wade through a flood of information that's of little relevance to them at this moment. Only relevant information pops up whenever they are clicking.

HTML

In this crude Tabs control, each of the tabs was implemented by a floating <DIV>. To make it easily discernible, it was given a border. It's important to make the handler function being called whenever a tab is clicked::

Normally, the DIVs would be arranged automatically one beneath the other. To get a horizontal row of DIVs, each one must be declared as

Similarly, the contents part associated to a tab was implemented as a <DIV> with

Note that the contents DIVs are declared to have  STLYE="display:none; " . So they are displayed only while they are active. That's controlled by the handler function:

Javascript

var  actidx=1;

function  handleTab(idx)
{
  var acttab, actcont,
      tab  = eval('tab'+idx),
      tab1 = eval('tab'+'1'),
      cont = eval('cont'+idx),
      acttab = eval('cont'+actidx);

   acttab.style.display = 'none';
   cont.style.display   = '';
   actidx = idx;
   cont.style.pixelTop  = tab.offsetTop + tab.offsetHeight;
   cont.style.pixelLeft = tab1.offsetLeft;
}

 actidx  is a global variable holding the index of the currently active Tab and its associated Cont. It must be global because the handler function is activated only when a Tab is clicked. If it was declared locally, it would be initialized again upon the next clicking.

The Cont DIVs have also  STYLE="position:absolute"  That's needed because they will be positioned by the handler function.

Initializing

Therefore it's necessary to initialize such a Tabs control by a BODY-attribute, e.g. if you want  Cont1  to be displayed first:

In this sample there is deliberately no initializing, to show you what happens if it is forgotten: Usually not very much will happen. It's just user-friendlier to let the user know at first glance that there's a Tabs control on screen. (And, on a second thought you will realize: It gives you a good chance to bring before the readers' eyes that information you want to feature prominently.)

Obviously, that sample is of no practical use whatsoever. It was just meant to show you the basic ideas behind a Tabs control.

Dynamic Styling

First thing to make your Tabs practically usable is, to make them being displayed in a way that the user can easily get an idea which tab is currently active, and which of the other tabs should be clicked now.

An easy solution to that could be, to change the tab styles at runtime: the currently active tab would appear prominently e.g. by a white background, all the inactive tabs could have lightgrey background color (akin to "pushed to the far end").

That's how it was done in the following sample.

Try it yourself: Click on any of the Tabs. The corresponding Contents will be displayed. If there were any other Contents displayed before, they will disappear:

HTML

In order to make your Tabs practically useful, you will want to assign different styles to them. For example, it might make sense to make the currently active tab standing out visually by a white background color whereas all the other tabs are displayed with a lightgrey background, seemingly "pushed back to the background".

Now you can assign a style simply by declaring an object to be member of a class. E.g. the HTML-code of a DIV could be

It would be easy to implement that statically, e.g. by an inline STYLE="…  ". Unfortunately, the 'active tab' is changing whenever the user is clicking a tab. So, for dynamic styling, we need a local "style sheet".

Style Sheet

That takes a somewhat roundabout way of styling. First thing is the declare a local style sheet (e.g. right before the  </HEAD>  tag of you HTML document). You need to declare two different styles:

<STYLE>
<!--
.Tab          { … }
.ActiveTab    { … }
-->
</STYLE>

Javascript

In the handler function it's enough to assign a different class name to that object. Then it will be displayed in a different style. In the case of changing the style of a Tabs-control handler this could be:

acttab.className ='Tab';
tab.className ='ActiveTab';

In this coding scheme, 'acttab' is a reference to the currently active tab, 'tab' is a reference to the tab clicked by the user.

Blanking out Line between Tab and Contents

One - seemingly minor - thing spoiling the appearance of your Tabs control is the line between the currently active tab and the associated contents.

In the following sample you can see the difference: Without initialization, that line appears when the Tabs come up on screen. Once you click any tab, it is removed.

Try it yourself: Click any tab in the following sample:

HTML

In your HTML code, provide an empty image with no  SRC="…"   but just a style   background-color:white 

Style Sheet

.Blank      { position:absolute; width:1; height:1; z-index:2; 
              background-color:white}

• position:absolute  is needed because that image will be dynamically positioned by the handler function.
• width:1; height:1  is needed because that image should be placed inconspicuously before it is moved for the first time.
• z-index:2  is needed to make sure that the white line will be drawn over the line between tab and contents.
• background-color:white  is needed in order to blank out the line between tab and contents.

Javascript

Initializing

If you want to have a flawless layout of your Tabs right when it appears on screen for the first time, you need to initialize it. You can do that by an attribute in your <BODY>-tag. Say, you wanted to have  Cont1  displayed first:

Individual Modifications

When you take a fancy to Tabs, you will soon want to do some modifications to the layout, beyond the pre-defined style sheet.

Some of the modifications that will be described in the following have been applied in the following sample.

Try it yourself: click any of the following tabs:

Tab41

Tab42

Tab43

Tab44

Contents41

Contents42

Contents43

Contents44

Combined Styles

First thing you can do is to add some inline style declarations to your cont's and tab's, e.g. to have them displayed in different background colors. Well, you can have an inline style declaration, a local style sheet, and an external style sheet at the same time:

or

• If a style is declared in the external as well as the local style sheet, the local declarations override the externals.
• If a style is declared inline as well as externally or locally, the inline declarations have the highest priority.
• Styles that are not overridden remain in effect, no matter if declared locally or externally.

Note: In order to link an external style sheet to your HTML document, you need a line like the following before the closing </HEAD> tag:

pop-up TITLE

A slight restriction of Tabs is, that the tab labels should be one or a few words at maximum. So, a good idea for better user-friendliness is to provide pop-up titles to each of the tabs. When the user moves the cursor onto a tab and hesitates some ½ second, the title pops up and gives a brief explanation of the contents associated with this tab.

In HTML, this is coded as follows:

Try it yourself: Go back to the sample of this section, move the cursor onto a tab and wait some ½ second!

Featuring Active Tab

One simple thing you could do to feature the currently active tab is - make it standing out graphically! This is very user-friendly: your readers see at first glance which category of contents is on screen currently.

To do that, you just need two additional lines of Javascript in your handler function. (In the following coding scheme  acttab  is a reference to the old active tab,  tab  is a reference to the tab that was clicked by the reader.):

For a better layout it will be useful to have an additional style declaration in your  .ActiveTab-style:

Nested Tabs

Remember: within the DIV-tags of your Contents

there may be any HTML-code - i.e. also a nested Tabs:

<DIV ID="Contx" … >

   <DIV ID="Taby1" … > Taby1 </DIV>
                  :
   <DIV ID="Taby_n" … > Taby_n </DIV>

   <DIV ID="Conty1" … > … </DIV>
                  :
   <DIV ID="Conty_n" … > … </DIV>

</DIV>

Don't forget that the major Tabs control must be initialized as well as nested Tabs, for example:

An example of a nested tab you can try yourself in Tab4 of the sample above.