Quick Tabs with CSS & Javascript

Web 2.0 layouts are a standard feature of most websites these days. Add this very simple tabbed navigation example to any of your domino websites by downloading the attached .NSF file.

By using CSS styles and a small simple javascript routine, the developer can add as many tabs as the page will take in a chosen style for seamless, no refresh, navigation between information.

Quick Tabs Compatibility

This Quick Tab code has the following benefits:

View the Demo

View the demo database. This code can be downloaded by clicking on the QuickTabs.nsf file in the right hand column on this page.

How Does it Work?

There are 3 components to Quick Tabs that make it easy to add to any of your existing Domino apps:

1. CSS Styles (held is a page for easy access)
2. Javascript function (in the jSHeader section of the form)
3. HTML containing a number of DIV tags

CSS

The CSS holds 4 main style. An active tab, inactive tab, active tab body and an inactive tab body. When clicking on a tab, the Javascript routine is activated passing the currently selected tab to it. All the Javascript does is apply the new active tab style, display the new active tab body and hide the old active tab body.

Javascript

The key part to the Javascript function is the FOR loop that processes all the inactive tabs. This allows for unlimited amount of tabs on the page. Change the key VAR parameters in the function to add your preferences as required.

HTML

The HTML is a bunch of DIV tags with an ID label for each. When the tab is clicked the ID is passed to the javascript function. This can then determine which tab is active and which is inactive

Please feel free to use and manipulate this code as required.