java - not - spring mvc js and css

Css dinámico no aplicado en mi menú(tiles+spring 3.0)

Question

Estoy usando Spring 3.0 + azulejos. He creado el menú común con etiqueta de anclaje para todas las páginas y apliqué el css para el mismo. Estoy usando Jquery para cambiar dinámicamente la clase css para el menú cuando se hace clic en el menú.

Cuando se seleccione el menú / enlace, se aplicará la clase css “selectedTab” y, para todos los enlaces normales, se aplicará la clase css de la “pestaña”. Estoy enfrentando el problema de que con cada solicitud / clic en el menú se aplica la clase de estilo y luego, después de la respuesta, se vuelve a dejar de aplicar. Es decir, el estilo permanece aplicado entre la solicitud y la respuesta. Pero no después de la respuesta. El código para los enlaces del menú es el siguiente:

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

El Jquery para el mismo es:

función changeCss (ayuda) {// alerta (ayuda);

jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");


jQuery("#"+ aid).removeClass("tab");
jQuery("#" + aid).addClass("selectedTab");

}

Las clases de css para el menú son:

a.selectedTab: hover, .studioTopNavigationPanel .contentSection .navigationBox a .selectedTab: active {background-color: # B8D9ED; imagen de fondo: url ("../ images / tab_selected_bg.png"); posición de fondo: parte superior central; repetición de fondo: repetir-x; color: # 333333; cursor: puntero; bloqueo de pantalla; flotador izquierdo; tamaño de fuente: 14px; margen derecho: 3px; relleno: 5px 12px; texto-decoración: ninguno; }

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

Indique dónde estoy equivocado y proporcione la solución adecuada para el mismo lo antes posible.

Answer 1

Prueba esto

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

Quizás podrías probar algo como esto:

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

También creo que la construcción de un menú del lado del servidor, aplicando la pestaña seleccionada al elemento actual en cuestión es la mejor solución, como lo expuso Quaternion.

Pero si realmente no logras hacerlo, también puedes ( cuidado ... suciedad ) analizar document.location.href en js para saber en qué página estás, y luego aplicar la clase selectedTab al elemento correcto.

Answer 4

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

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

Answer 5

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

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

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 8

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

Pruébalo simplemente. Solo funcionará usted tiene que cambiar el estilo de lo que necesite. Esta funcionando.