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.