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; }