动态css不应用在我的菜单（瓷砖Spring3.0）

Question

我使用的是Spring 3.0 tiles。我为所有页面创建了带有锚定标记的公共菜单，并为相同页面应用了css。我使用Jquery在单击菜单时动态更改菜单的css类。

选择菜单/链接时，将应用“selectedTab”css类，对于所有正常链接，将应用“tab”css类。我面临的问题是，每次请求/单击菜单时，都会应用style类，然后在响应后再次取消应用。也就是说，样式仍然应用于请求和响应之间。但不是在回应之后。菜单链接的代码如下所示：

<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是：

函数更改Css（aid）{//警报（aid）；

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


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

}

菜单的Css类是：

a.selected选项卡：悬停，. studioTopNavigationGroup. contentSect. NavigationBox a. selectedTab： active{background-颜色：#B8D9ED； background-图像： url（".../图像/tab_selected_bg.png"）； background-位置：居中顶部；background-重复：重复-x；颜色：#333333；光标：指针；显示：块；浮动：左；字体大小： 14px；边距-右：3px；填充：5px 12px；文本装饰：无；}

.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

也许你可以试试这样的方法：

var urlProjectsController = 'http://yourdomain.com/projectscontroller.html';
var urlMilestones = 'http://yourdomain.com/milestones.html';
if (window.location.href == urlProjectsController ){
  jQuery("#projects").removeClass("tab");
  jQuery("#projects").addClass("selectedTab");
}else if (window.location.href == urlMilestones ){
  jQuery("#milestones").removeClass("tab");
  jQuery("#milestones").addClass("selectedTab");
}
......
......
and so on for the remaining links.

Answer 2

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

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

Answer 3

<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>

简单地试试。它会起作用的，只有你需要改变你需要的样式。它起作用了。