This is an easy, simple, and flexible method for creating DHTML tabs in your website. The tabs are created with an unordered list (UL) instead of a table, which allows for fully dynamic use of tab strips anywhere in your site. If there is not enough space to appear, your tabs will wrap to appear on two lines. Try resizing your browser window now to see the flexibility of these tabs in action!


The JavaScript used to power this tab strip consists of one very small function. The tabs are event-driven, which means that you can switch tabs from a timer, page event, or even from a hyperlink elsewhere in your page.


The content style, tab hover effects, and images are all created through the use of CSS. Creating a design that matches your own site is as easy as changing colors and images to fit your design pallete.

The Nitty Gritty

What are you waiting for? Right-click anywhere on this page and select "View Source" to see the code. You can also visit this blog post for a more in-depth look at the tab control.