When using CSS, there are essentially two classes involved. One controls the default color of tabs, while a "selected" CSS class is added through JavaScript when a tab is clicked.
The functionality works perfectly, but unfortunately, the dynamic CSS only functions in Internet Explorer 7 and Internet Explorer 8.
Below is an example of the code being used:
for (var i = 0; i < group.children.length; i++)
{
child = group.children[i];
// Remove class (selected)
child.className = "";
This section of code removes the "selected" CSS class from each element. The default CSS styling is automatically applied, so this resets them to their original state.
Following other logic, the selected CSS class is then applied to the tab that was clicked:
// Set selected tab
tab.className += "SelectedTab";
Could there be an issue with my implementation? While it appears to work fine in IE7 and IE8, Firefox initially displays the tabs correctly with the first one selected. However, when clicking on another tab, it properly clears the selected CSS from the first tab, but fails to apply the "selected" CSS to the next tab.