我正在使用Spring 3.0 + tiles。我已经为所有页面创建了带有锚标记的公共菜单,并为其应用了css。我点击菜单时使用Jquery动态更改菜单的css类。
当选择菜单/链接时,将应用“selectedTab”css类,并且对于所有正常链接,将应用“tab”css类。 我面临的问题是,每次请求/点击菜单都会应用样式类,然后在响应后再次取消应用。也就是说,样式仍然在请求和响应之间应用。但不是在回应之后。 菜单链接的代码如下:
<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>
同样的Jquery是:
功能changeCss(援助) { //警报(助剂);
jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");
jQuery("#"+ aid).removeClass("tab");
jQuery("#" + aid).addClass("selectedTab");
}
菜单的Css类是:
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;
}
下面是我的tiles.xml文件。我有一个名为project的模块,tiles.xml文件包含菜单的配置。
<tiles-definitions>
<definition name="baseLayout" template="/WEB-INF/tiles/baseLayout.jsp">
<put-attribute name="title" value="Template"/>
<put-attribute name="header" value="/WEB-INF/tiles/header.jsp"/>
<put-attribute name="menu" value="/WEB-INF/tiles/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/tiles/body.jsp"/>
<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp"/>
</definition>
<!-- Project Controllers request navigations of jsps -->
<definition name="dashboard" extends="baseLayout">
<put-attribute name="title" value="Dashboard"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/dashboard.jsp"/>
</definition>
<definition name="projectsnew" extends="baseLayout">
<put-attribute name="title" value="Dashboard"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/projectsnew.jsp"/>
</definition>
<definition name="createproject" extends="baseLayout">
<put-attribute name="title" value="Dashboard"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/createproject.jsp"/>
</definition>
<definition name="projectsInfo" extends="baseLayout">
<put-attribute name="title" value="Project Info"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/projectinfomenu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/projectsInfo.jsp"/>
</definition>
<definition name="editprojects" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/editprojects.jsp"/>
</definition>
<definition name="milestones" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/milestones.jsp"/>
</definition>
<definition name="tasks" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/tasks.jsp"/>
</definition>
<definition name="discussion" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/discussions.jsp"/>
</definition>
<definition name="newdiscussion" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/newdiscussion.jsp"/>
</definition>
<definition name="reports" extends="baseLayout">
<put-attribute name="title" value="Edit Projects"/>
<put-attribute name="menu" value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
<put-attribute name="body" value="/WEB-INF/jsp/projectsjsp/reports.jsp"/>
</definition>
</tiles-definitions>
请告诉我哪里错了,并尽快为此提供适当的解决方案。