我的菜单中没有应用动态css(tiles + spring 3.0)

Question

我使用的是Spring 3.0 +瓷砖.我已经为所有页面创建了带有锚标记的公共菜单,并为其应用了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是:

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

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-repeat:repeat-x; 颜色:#333333; 游标:指针; 显示:块; 向左飘浮; font-size:14px; margin-right:3px; 填充: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;
}

请告诉我哪里错了,并尽快提供相应的解决方案.

Answer 1

我还认为，服务器端菜单构造，将 selectedTab 应用于当前相关元素是最好的解决方案，正如四元数所公开的那样。

但如果你实在做不到，你也可以（小心……脏）解析js中的document.location.href来知道你在哪个页面，然后将selectedTab类应用到正确的元素上。