I wrote a tab control but I cannot get the css to work in all browsers, how do I fix it?

Question

Using CSS, there are basically two classes, one for the tabs default colour, and a "selected" CSS class that is applied using javascript to whichever tab is clicked.

The control fuctions perfectly, but the dynamic CSS only works in IE7 and IE8.

The code is basically this:

for (var i = 0; i < group.children.length; i++)
{
    child = group.children[i];

    // Remove class (selected)
    child.className = "";

To remove the "selected" css class from each element. The default CSS is automatic, not specified using class=, so basically this reverts them to default.

Then after the other logic, it applies the selected CSS to whichever one was clicked:

// Set selected tab

tab.className += "SelectedTab";

Am I doing it wrong? It seems ok in IE7/8 but firefox renders the tabs correctly initially, with the first tab being "selected", but when I click another tab, it clears the selected CSS from the first one correctly, but doesn't apply "selected" css again to the next tab.

Answer 1

Have a look at the page using the DOM inspector in Firefox, and make sure there isn't something wrong with the JavaScript by either using the Error Console or Firebug.

If you could post some more code, or even better, the link to a test page, then we might be able to help you more. Right now there isn't much we can do with the code you've posted.

Answer 2

JQuery is really awesome for this kind of stuff.

$(child).removeClass("SelectedTab");

$(tab).addClass("SelectedTab");