Tabbed Interface – How to add tabs to your web site

Using tabs on your site is made simple with CSS.

Start out by defining your tabs in an unordered list element:

<ul id="tabs">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>

Then, add these styles to your external or inline style sheet, adjust the colors to your liking:

#tabs { margin: 1em 0 0 0; }
#tabs li { display: inline; width: 50px; }
#tabs a { padding: 2px 8px 2px 8px; border: 1px solid #4a7194; margin-left: .5em; text-decoration: none; }

Now, lets say that you want to highlight or emphasize the current tab.  You will modify each page, adding a class attribute to the <li> tag for the current page as follows.  For page1.cfm:

<ul id="tabs">
<li class="selected"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>

Then, add this line to your style sheet, and again, adjust the color to your liking:

#tabs li.selected a { color: #fff; background-color: #4a7194; }