[jQuery] Can't get add/removeClass to work

[Alen Ribic]

I have a set of HTML tabs that I am trying to highlight depending
which one is selected.
When I do some debug, I can see that the removeClass and the addClass
seem to work, however it seems that the CSS is perhpas overrides the
change that the removeClass/addClass make.

Here is the code:

HTML:

<ul id="tabmenu">
        <li><a class="active" href="<c:url value="/dispatcher?
cn=index&act=index"/>" onclick="activateTabMenu(this);">Main</a></li>
        <li><a href="<c:url value="/dispatcher?
cn=registration&act=list"/>" onclick="activateTabMenu
(this);">Registration</a></li>
        <li><a href="<c:url value="/dispatcher?cn=scoreCard&act=view"/
>" onclick="activateTabMenu(this);">Score Card</a></li>
</ul>


CSS:

#tabmenu a, a.active {
    color: #DEDECF;
    background: #898B5E;
    font: bold 1em "Trebuchet MS", Arial, sans-serif;
    border: 2px solid black;
    padding: 2px 5px 0px 5px;
    margin: 0;
    text-decoration: none;
}

#tabmenu a.active {
    background: #ABAD85;
    border-bottom: 3px solid #ABAD85;
}

#tabmenu a:hover {
    color: #fff;
    background: #ADC09F;
}

#tabmenu a:visited {
    color: #E8E9BE;
}

#tabmenu a.active:hover {
    background: #ABAD85;
    color: #DEDECF;
}


JavaScript:

function activateTabMenu(obj) {
    $('#tabmenu a').each(function () {$(this).removeClass
("active");});
    $(obj).addClass("active");
}

Any help gladly appreciated.

-Alen