No cambia el color del elemento “li” en el menú – CSS

publicado por: Anonymous

¿Por qué se mantiene SIEMPRE el primer elemento “li” del menú aunque clicke en otro?

Si en lugar de poner la dirección donde debe ir cada “li” simplemente añado un href=”#” me funciona pero con la dirección no funciona.

Código:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
  $('ul li a').click(function() {_x000D_
    $('li a').removeClass("active");_x000D_
    $(this).addClass("active");_x000D_
  });_x000D_
});

_x000D_

#menu_horizontal li {_x000D_
  list-style: none;_x000D_
  display: inline;_x000D_
  margin-left: 10px;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a {_x000D_
  padding: 3px 1em;_x000D_
  border: 1px solid #778;_x000D_
  border-bottom: none;_x000D_
  background: #DDE;_x000D_
  text-decoration: none;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a:link {_x000D_
  color: #448;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a:hover {_x000D_
  color: white;_x000D_
  background: red;_x000D_
  border-color: #227;_x000D_
}_x000D_
_x000D_
#menu_horizontal .active {_x000D_
  background: red;_x000D_
  color: white;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<ul id="menu_horizontal">_x000D_
  <li class="nueva" id="nueva"><a class="active" href="menu_cliente.php?nueva=1">NUEVA OPINIÓN</a></li>_x000D_
  <li class="ver" id="ver"><a href="menu_cliente.php?ver=1">VER OPINIONES</a></li>_x000D_
  <li class="eliminar" id="eliminar"><a href="menu_cliente.php?eliminar=1">ELIMINAR OPINIÓN</a></li>_x000D_
  <li class="datos_cliente" id="datos_cliente"><a href="menu_cliente.php?datos_cliente=1">DATOS PERSONALES</a></li>_x000D_
</ul>

_x000D_

_x000D_

_x000D_

solución

Se podría hacer algo sólo con CSS usando el selector :target. Con :target se seleccionará el elemento con el id especificado en el identificador de fragmentos de la URI (la parte que va detrás del #).

Entonces cambiando el enlace de menu_cliente.php?nueva=1 a menu_cliente.php?nueva=1#nueva, cuando se pulse en “nueva opinión” y se recargue la página, como se ha añadido el # con el id de la opción del menú, esa opción se activará:

_x000D_

_x000D_

#menu_horizontal li {_x000D_
  list-style: none;_x000D_
  display: inline;_x000D_
  margin-left: 10px;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a {_x000D_
  padding: 3px 1em;_x000D_
  border: 1px solid #778;_x000D_
  border-bottom: none;_x000D_
  background: #DDE;_x000D_
  text-decoration: none;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a:link {_x000D_
  color: #448;_x000D_
}_x000D_
_x000D_
#menu_horizontal li a:hover {_x000D_
  color: white;_x000D_
  background: red;_x000D_
  border-color: #227;_x000D_
}_x000D_
_x000D_
#menu_horizontal li:target a {_x000D_
  background: red;_x000D_
  color: white;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<ul id="menu_horizontal">_x000D_
  <li class="nueva" id="nueva"><a class="active" href="menu_cliente.php?nueva=1#nueva">NUEVA OPINIÓN</a></li>_x000D_
  <li class="ver" id="ver"><a href="menu_cliente.php?ver=1#ver">VER OPINIONES</a></li>_x000D_
  <li class="eliminar" id="eliminar"><a href="menu_cliente.php?eliminar=1#eliminar">ELIMINAR OPINIÓN</a></li>_x000D_
  <li class="datos_cliente" id="datos_cliente"><a href="menu_cliente.php?datos_cliente=1#datos_cliente">DATOS PERSONALES</a></li>_x000D_
</ul>

_x000D_

_x000D_

_x000D_


Como recomendación: en lugar de recargar la página menu_cliente.php cada vez que se pulse en un menú, lo que podrías hacer es hacer llamadas AJAX cuando cambie el # de la página.

De ese modo se daría una mejor experiencia de usuario porque no se recargaría la página completa, la parte común se mantendría constante y sólo cambiaría un contenedor principal, lo que también haría tu sitio web más rápido.

Puedes ver un ejemplo de eso en esta otra pregunta.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *