css tabs that do not require div changes for the active tab

Question

I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".

The only implementation I found so far that solves this is the following one: http://unraveled.com/publications/css_tabs/

It requires assigning a class to each tab and uses the body id to determine the active tab.

Is this the only way or is there any other alternatives?

My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):

<div class="productTabsBlock2">
  <a id="selectedTab" href="/link1" >OVERVIEW</a>
  <a href="/link2">SCREENSHOTS</a>
  <a id="noajax" href="/link3" >SPEED TESTS</a>
  <a href="/link4" >AWARDS</a>
</div>

EDIT: asp is available as server side and is already used on these pages.

Answer 1

An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.

Answer 2

If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.

If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.

Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.

Answer 3

you could use jQuery to add the `selectedTab' id (or class) like so

$('.productTabsBlock2 a').mouseover(function () {
  $(this).addClass('selectedTab');
});