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

Question

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

Когда выбрано меню/ссылка, применяется класс CSS «selectedTab», и для всех обычных ссылок «вкладка» применяется класс 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 в .selectedTab: активный { background- цвет: # B8D9ED; background-image: url ("../ images/tab_selected_bg.png"); background-position: center top; background-repeat: repeat-x; цвет: # 333333; курсор: указатель; дисплей: блок; float: слева; Размер шрифта: 14 пикселей; 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

Я также считаю, что построение меню на стороне сервера, применяя выбранный Tab к текущему интересующему элементу, является лучшим решением, как показано Quarterion.

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

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

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

Answer 4

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

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

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

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

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

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

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