Динамический css не применяется в моем меню (плитки + spring 3.0)

Я использую Spring 3.0 + плитки. Я создал общее меню с привязным тегом для всех страниц и применил CSS для этого же. Я использую JQuery для динамического изменения класса css для меню при щелчке по меню.

Когда выбрано меню/ссылка, должен применяться класс CSS "selectedTab", и для всех обычных ссылок "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: парить, .studioTopNavigationPanel .contentSection .navigationBox a .selectedTab: активный { background-color: # B8D9ED; background-image: url ( "../images/tab_selected_bg.png" ); background-position: центральная вершина; background-repeat: repeat-x; цвет: # 333333; курсор: указатель; display: block; плыть налево; 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;
}

Расскажите, где я ошибаюсь, и приложите соответствующее решение как можно скорее.

Ответы

Ответ 1

Я также считаю, что построение меню на стороне сервера, применяя selectedTab к текущему соответствующему элементу, является лучшим решением, как показано Quaternion.

Но если вы действительно не можете это сделать, вы также можете (осторожно... грязь) проанализировать document.location.href в js, чтобы узнать, на какой странице вы находитесь, и затем примените класс selectedTab к правому элементу.

Ответ 2

Возможно, вы могли бы попробовать что-то вроде этого:

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.

Ответ 3

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");
 })
});

Ответ 4

   $(document).on("click", "#message", function(event) {

    $('.chat-type-msg').css('background-color','#FAFAFA');
    $('.chat-type-msg').css('color','#535353');
   });

Ответ 5

Попробуйте это

.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;
}

Ответ 6

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");
    }
   });
});

Ответ 7

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

Попробуйте просто. Он будет работать только вам придется менять стиль, что вам нужно. Его работа.

Ответ 8

 $(function(){
    $("#menu a").on("click",function(){
      var ths = $(this);
      if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
      else{ths.removeClass("tab").addClass("selectedTab");}
    });
 });