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

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

Когда выбрано меню/ссылка, должен применяться класс CSS «selectedTab», а для всех обычных ссылок должен применяться класс CSS «Tab». Я столкнулся с проблемой, что при каждом запросе/щелчке в меню применяется класс стиля, а затем после ответа он снова не применяется. То есть стиль остается примененным между запросом и ответом. Но не после ответа. Код для ссылок меню выглядит следующим образом:

<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(помощь) { //оповещение(помощь);

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 {цвет фона: #B8D9ED; фоновое изображение: URL("../images/tab_selected_bg.png"); background-position: по центру вверху; фоновый повтор: повтор-х; цвет: #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;
}

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


java jquery tiles spring-3 dynamic-css
person Amee Mehta    schedule 01.04.2013    source источник
comment
Вы спрашиваете, почему использование JavaScript для оформления вашего меню работает только для текущего запроса, а не на новой странице?   -  person Quaternion    schedule 02.04.2013
comment
Да, с плитками, когда я нажимаю на меню, загружается вся запрошенная страница, что даже загружает menu.jsp. Таким образом, между запросом и ответом эффект применяется, но не после отображения запрошенной страницы.   -  person Amee Mehta    schedule 03.04.2013
comment
Когда вы нажимаете клавишу f5, страница перезагружается (новый запрос), и ваши программы JavaScript начинаются с нуля. Это то же самое для каждого нового запроса, возможно, это можно обойти, используя постоянство на стороне клиента, но с несколькими окнами браузера (что будут делать многие пользователи, будут неприятные отягчающие побочные эффекты). Вам нужно решить проблему на стороне сервера. Но JS-решение на стороне клиента не особенно хорошо. Когда вы генерируете HTML, вы можете просто поместить выбранный класс html в элемент... затем, используя JS, вы можете сделать что-то разумное.   -  person Quaternion    schedule 03.04.2013
comment
Как только вы решите, как вы хотите установить этот html-класс, мы можем вам помочь, а также предоставить некоторый код при этом (на стороне сервера).   -  person Quaternion    schedule 03.04.2013
comment
Да, я сделал то же самое. Я применил класс SelectedTab к меню, которое остается выбранным при первой загрузке страницы (в моем случае приборная панель остается выбранной). Все остальные меню отданы во вкладку класса. Затем с помощью приведенного выше кода jquery я меняю класс меню.   -  person Amee Mehta    schedule 03.04.2013
comment
Я вижу, что эффект css применяется всего за 2-3 секунды между запросом и ответом. Он гаснет после ответа.   -  person Amee Mehta    schedule 03.04.2013
comment
... вы нажимаете, происходит эффект ... на сервер делается запрос, требуется некоторое время, чтобы подготовить новую страницу, он отправляет данные обратно, удаляя ваши изменения. Не используйте JS для постоянных эффектов.   -  person Quaternion    schedule 03.04.2013
comment
Это именно то, что происходит. Но тогда, пожалуйста, предложите подходящее решение для этого ...... Что я должен использовать по вашему мнению?????   -  person Amee Mehta    schedule 03.04.2013
comment
Трудно сказать, я знаю struts2, а не Spring-mvc, но я знаю Tiles. Если вы используете плитки версии 3, вы можете использовать различные языки выражений (MVEL, EL, в моем случае OGNL), чтобы помочь в построении меню. Подстановочные знаки/регулярные выражения также можно использовать в выражениях тайлов. В JSP должен быть способ определить, какое действие было вызвано, чтобы вы могли использовать условную логику при сборке своего меню. Способов много, но все они серверные.   -  person Quaternion    schedule 03.04.2013
comment
Хорошо .. Большое спасибо за ваше предложение. Постараюсь реализовать то же самое в своем проекте.... !!!! Спасибо за помощь..!!!   -  person Amee Mehta    schedule 04.04.2013

Ответы (4)


arrow_upward
2
arrow_downward 

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

Попробуйте просто. Это будет работать, только вам нужно изменить стиль, который вам нужен. Это работает.

person Dipak    schedule 07.01.2014

arrow_upward
1
arrow_downward

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

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

person Robin Leboeuf    schedule 09.04.2013
comment
почему вы говорите, что синтаксический анализ location.href грязный? - person Michał Rybak; 14.10.2013
comment
Я не говорю, что парсить location.href грязно, я говорю, что делать это в данном контексте — не лучший способ решить проблему. Гораздо эффективнее создать все меню на стороне сервера, чем создавать его без каких-либо классов, а затем, после отображения его на стороне клиента, наблюдать за URL-адресом, анализировать его, чтобы определить, на какой странице вы находитесь, а затем применять классы к элементам меню стилей. (ИМО :)) - person Robin Leboeuf; 14.10.2013

arrow_upward
1
arrow_downward

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

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.
person ilias    schedule 20.10.2013

arrow_upward
1
arrow_downward

Попробуй это

.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;
}
person Prasath    schedule 04.11.2013