Hi Alen, Looks to me that when you click on a tab then a new page gets loaded. The activateTabMenu function changes the classes in the old page, but the new page is then loaded which will just apply the CSS. The activateTabMenu function does not have any affect on the new page.
You could try adding some code to the document ready function to run when the page loads. A bit like this to search through all the tabs and find the one for the current page: $(document).ready(function(){ $('#tabmenu a').each(function(){ if ("this_tab_selected") { $(this).addClass("active"); } }); }); "this_tab_selected" - could be a test to compare part of the href attribute with part of the url query string. Paul On Nov 17, 9:39 am, Alen Ribic <[EMAIL PROTECTED]> wrote: > 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