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
