2

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

$(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});
#menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

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

10
  • Puedes usar jquery o javascript? o solo lo quieres con CSS puro?
    – Alvarez
    Commented el 3 ene. 2018 a las 3:11
  • Me gustaría hacerlo con CSS si fuera posible... Ya que estaba intentándolo con ello... sino con jQuery.
    – omaza1990
    Commented el 3 ene. 2018 a las 3:12
  • 2
    El primer elemento de la lista tiene 3 ID eso es incorrecto, sólo puede tener uno.
    – azeós
    Commented el 3 ene. 2018 a las 4:32
  • Hola, tiene que estar activada la primera opción en un primer momento?
    – Edu3D
    Commented el 3 ene. 2018 a las 9:51
  • Si, por defecto debe estar activada la primera.
    – omaza1990
    Commented el 3 ene. 2018 a las 9:53

2 respuestas 2

4

Con CSS no seria dinamico, porque tendrias que agregar una clase por cada link que tengas. Entonces jquery simplifica las cosas, cada vez que das click en un link se le agrega la clase active a dicho link, y al mismo tiempo se elimina del link que estaba activo.

Espero sea de ayuda.

$(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});
#menu_horizontal {
  padding: 3px 0px;
  border-bottom: 1px solid #778;
  font: bold 16px Verdana, sans-serif;
}

#menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

#menu_horizontal li a#current {
  background: #AAE;
}

#menu_horizontal .active {
  background: red;
  color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menu_horizontal">
  <li id="nueva"><a class="active" href="#">NUEVA OPINIÓN</a></li>
  <!-- id="current" -->
  <li class="ver" id="ver"><a href="#">VER OPINIONES</a></li>
  <li class="eliminar" id="eliminar"><a href="#">ELIMINAR OPINIÓN</a></li>
  <li class="datos_cliente" id="datos_cliente"><a href="#">DATOS PERSONALES</a></li>
</ul>

2
  • En tu ejemplo me funciona pero transladado a mi programa no me funciona, hace todo los colores etc etc, pero cuando selecciono un elemento no mantiene el "rojo" en él, lo sigue manteniéndo en el de por defecto
    – omaza1990
    Commented el 3 ene. 2018 a las 9:22
  • El problema está en que mis "href" deben tener la dirección para cambiar el contenido del body dependiendo de qué opción elijan... con "#" me funciona pero en mi caso no sería válido.
    – omaza1990
    Commented el 3 ene. 2018 a las 9:25
3

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

#menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

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


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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.