18

我正在使用 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; 背景图像：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;
}

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

4

8 回答 8

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

简单地尝试一下。只有您必须根据需要更改样式，它才会起作用。它的工作。

于 2014-01-07T12:27:47.967 回答
1 
 $(function(){
    $("#menu a").on("click",function(){
      var ths = $(this);
      if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
      else{ths.removeClass("tab").addClass("selectedTab");}
    });
 });
于 2014-02-27T05:38:13.027 回答
1

尝试这个

.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 !important;
background-image: url("../images/tab_selected_bg.png");
background-position: center top;
background-repeat: repeat-x;
color: #333333!important;
cursor: pointer;
display: block;
float: left;
font-size: 14px;
margin-right: 3px;
padding: 5px 12px;
text-decoration: none;
}
于 2013-11-04T07:07:35.730 回答
1

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

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

于 2013-04-09T14:00:02.250 回答
1 
jQuery(function(){
  jQuery("#menu a").on("click",function(){
    jQuery("#menu a").removeClass("selectedTab");
    jQuery("#menu a").addClass("tab");
    jQuery(this).removeClass("tab");
    jQuery(this).addClass("selectedTab");
 })
});
于 2013-10-24T04:52:25.307 回答
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.
于 2013-10-20T01:48:16.297 回答
1 
jQuery(function(){
  jQuery("#menu a").on("click",function(){
    if($('#test').attr('class')=="selectedTab")
      jQuery("#menu a").removeClass("selectedTab");
      jQuery("#menu a").addClass("tab");
   }
   else{ jQuery(this).removeClass("tab");
     jQuery(this).addClass("selectedTab");
    }
   });
});
于 2013-12-31T13:22:11.067 回答
1 
   $(document).on("click", "#message", function(event) {

    $('.chat-type-msg').css('background-color','#FAFAFA');
    $('.chat-type-msg').css('color','#535353');
   });
于 2013-10-30T11:04:32.863 回答