Dynamic css not applied in my menu (tiles + spring 3.0)

Question

I am using Spring 3.0 + tiles. I have created the common menu with anchor tag for all the pages and applied the css for the same. I am using Jquery for dynamically changing the css class for the menu when the menu is clicked.

When the menu/link is selected, “selectedTab” css class is to be applied and for all the normal links “tab” css class is to be applied. I am facing the problem that with each request/click on the menu the style class is applied and then after the response it gets unapplied again. That is, the style remains applied between the request and response. But not after the response. The code for menu links is as under:

<div id="menu" class=" mainPageLayout clearFix" style="width:980px;margin:0 auto;">
    <a id="dashboard" class="selectedTab" href="dashboard.html" onclick="return changeCss('dashboard');">
        <span>Dashboard</span>
    </a>

    <a id="projects" class="tab" href="projectscontroller.html" onclick="return changeCss('projects');">
        <span>Projects</span>
    </a>

    <a id="milestones" class="tab" href="milestones.html" onclick="return changeCss('milestones');">
        <span>Milestones</span>
    </a>

    <a id="tasks" class="tab" href="tasks.html" onclick="return changeCss('tasks');">
        <span>Tasks</span>
    </a>

    <a id="discussions" class="tab" href="messages.html" onclick="return changeCss('discussions');">
        <span>Discussions</span>
    </a>

    <a id="reports" class="tab" href="reports.html" onclick="return changeCss('reports');">
        <span>Reports</span>
    </a>

    <a id="history" class="tab" href="projects/history.html" onclick="return changeCss('history');">
        <span>History</span>
    </a>

    <a id="templates" class="tab" style="float: right;" href="projects/users.html" onclick="return changeCss('templates');">
        <span>Project templates</span>
    </a>

    <a id="users" class="tab" style="float: right;" href="projects/projectTemp.html" onclick="return changeCss('users');">
        <span>Users</span>
    </a>
</div>

The Jquery for the same is:

function changeCss(aid) { //alert(aid);

jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");


jQuery("#"+ aid).removeClass("tab");
jQuery("#" + aid).addClass("selectedTab");

}

The Css classes for the menu are:

a.selectedTab:hover, .studioTopNavigationPanel .contentSection .navigationBox a .selectedTab:active { background-color: #B8D9ED; background-image: url("../images/tab_selected_bg.png"); background-position: center top; background-repeat: repeat-x; color: #333333; cursor: pointer; display: block; float: left; font-size: 14px; margin-right: 3px; padding: 5px 12px; text-decoration: none; }

.studioTopNavigationPanel .contentSection .navigationBox a.tab, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:active 
{
    background-color: #ECF3F7;
    background-image: url("../images/tab_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}



.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
{
    background-color: #B8D9ED;
    background-image: url("../images/tab_selected_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}

Please tell where I am wrong and provide appropriate solution for the same as soon as possible.

Answer 1

<html>
<head>
<style type="text/css">
 .about_normal
 {
   background-color:red;
   color:blue;
 }
 .about_active
 {
   background-color:black;
   color:green;
 }
</style>
<script type="text/javascript">
var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'about_normal';
divSelected = x;
x.className = 'about_active';
}
</script>
</head>
<body>
 <ul>
  <li class="about_normal" id="t1"><a href="#1" onclick="SelectOrUnSelect(t1)">Our Mission</a></li>
  <li class="about_normal" id="t2"><a href="#2" onclick="SelectOrUnSelect(t2)">Company Info</a></li>
  <li class="about_normal" id="t3"><a href="#3" onclick="SelectOrUnSelect(t3)">All Services</a></li>
  <li class="about_normal" id="t4"><a href="#4" onclick="SelectOrUnSelect(t4)">Press</a></li>
  <li class="about_normal" id="t5"><a href="#5" onclick="SelectOrUnSelect(t5)">Careers</a></li>
 </ul>
</body>
</html>

Try it simply. It will work only you have to change the styling whatever you require. Its working.

Answer 2

I also think that a server-side menu construction, applying selectedTab to the current concerned element is the best solution, as exposed by Quaternion.

But if you really don't manage to do it, you can also (carefull... dirt) parse the document.location.href in js to know on which page you are, and then apply the selectedTab class to the right element.