我的菜单中未应用的动态 css（磁贴 + 弹簧 3.0）

jquery java spring-3 tiles dynamic-css

2022-09-04 03:59:24

我正在使用春季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“）;背景位置：居中顶部;背景重复：重复 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;
}

请告诉我哪里错了，并尽快提供适当的解决方案。

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

简单尝试一下。只有您必须根据需要更改样式才能工作。它的工作原理。

答案 2

我还认为，服务器端菜单结构，将selectedTab应用于当前相关元素是最佳解决方案，正如Quaternion所揭示的那样。

但是，如果您真的无法做到这一点，您也可以（小心...dirt）在 js 中解析 document.location.href 以了解您在哪个页面上，然后将 selectedTab 类应用于正确的元素。