Tabs

Tabs are a common way to navigate around a website. There are a number of different schemes for building tabs. This one is a very simple one that combines html, javascript and css. All of the components of this scheme are on one page, including the javascript. It is similar to AJAX tab schemes, but it does not require a server-side backend, such as php, perl or jsp. You can also jazz it up with background gifs and corners, but it's better to understand the basic dynamics first. Here is the javascript:

As you can see, the javascript names the ids and classes. The dynamics work with the fact that javascript can write css, and thus change the class definition of the open (active) and closed (inactive) tags. You need to write styles for the tabs, the tab contents, and the "open" versus "closed" or "active" versus "inactive" tabs. It doesn't matter what you name these styles, as long as they match the terms you use in the javascript, because the "getElementById()" function is used to identify the respective content panels and tabs. Above is the javascript that goes into the head tag. Here is the javascript that goes into the html:

The tab titles are built as inline-list links, and use the properties of onclick inherent in the "active" mouse event of the
<a href=""> tag. The content divs are hidden (using the style="display:none" property) until the tab is clicked. By clicking the mouse, the style is changed to "display:block" by the javascript, and the other tabs are hidden with the "display:none" command. you can right-click and see the code, but I recreate it here to explain how it works. Here is the css:

This scheme is a very simple scheme that does not involve background gifs, although they can be added in the class definitions. The illusion of the active versus inactive tabs is achieved simply by changing background colors in the style definitions, and also by changing the color of the bottom border of the active tab to white, making it appear to be part of the open page below. If the padding is adjusted by one pixel up or down, it will not work. So, observe the padding details. The first tab is set to initiate on the active state.