0

He seguido varios de los ejemplos de este post, pero no ha funcionado en Blogger al momento de cambiar la almohadilla (#) por una URL.

Inserté lo siguiente en el <head> del documento.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">

Además, inserté el HTML en un gatget:

<div id="main">
<ul>
    <li><a id="inicio" href="http://bpbmsm.blogspot.pe/">Inicio</a></li>
    <li><a id="nosotros" href="http://bpbmsm.blogspot.pe/p/pagina1">Sobre nosotros</a></li>
    <li><a id="producto" href="http://bpbmsm.blogspot.pe/p/pagina2">Producto</a></li>
    <li><a id="contacto" href="http://bpbmsm.blogspot.pe/search/label/etiqueta1">Contacto</a></li>
</ul>
</div>

Todo lo demás lo dejé como estaba.

Por otro lado, el siguiente script, también lo inserté dentro del head:

$(function() {
  $("#main ul li a").click(function() {
    // quitar .seleccionado a todos (por si hay alguno)
    $("#main ul li a").removeClass("seleccionado");
    // agregar seleccionado a "este" elemento.
    $(this).addClass("seleccionado");
  });
});

Utilizo este blog para probar: http://bpbmsm.blogspot.pe/

2
  • Tienes que quitar la almohadilla del href
    – Alvaro Montoro
    Commented el 15 ene. 2017 a las 7:25
  • Ya lo se, pero olvidé hacerlo cuando pegué el código aquí. Gracias, Alvaro. Commented el 16 ene. 2017 a las 7:12

1 respuesta 1

0

Lo que sucede es que al cliquear el enlace estás re-iniciando el estado del sitio, por lo que cualquier cambio realizado se pierde, existen dos formas de evitar la perdida del estado del sitio y son las siguientes

  1. Inferencia es posible a través de algún método saber el éstado anterior.
  2. Indicarle al navegador que guarde el estado (Cookies, LocalStorage, Session Storage, etc)

En este caso como los enlaces redirigen al mismo sitio, es posible utilizar la inferencia.

HTML

<div id="main">
<ul>
    <li><a id="inicio" href="http://bpbmsm.blogspot.pe/">Inicio</a></li>
    <li><a id="nosotros" href="http://bpbmsm.blogspot.pe/p/pagina1">Sobre nosotros</a></li>
    <li><a id="producto" href="http://bpbmsm.blogspot.pe/p/pagina2">Producto</a></li>
    <li><a id="contacto" href="http://bpbmsm.blogspot.pe/search/label/etiqueta1">Contacto</a></li>
</ul>
</div>

y agregas el siguiente script

$(document).ready(function(){
  var menu_entries = $('#main li a');
  menu_entries.each(function(){
    if(this.href==window.location.href){
      $(this.parentElement).addClass('active');
    }
  });
});

El script lo que hace es que compara la dirección actual del sitio, y si es igual a la de algún enlace, entonces le agregará la clase "active" al elemento <li>, por lo que tu puedes personalizar facilmente el elemento activo con CSS

#main li.active { 
  background-color : red  /*elemento activo */
}


#main li{ 
  background-color : blue /* elemento normal */
}
5
  • Gracias por responder, Eduen, pero no funciona. Commented el 16 ene. 2017 a las 17:49
  • en el html que expusiste al principio, el html utiliza el identificador main pero en tu sitio utilizas menu, veo que el css lo has cambiado perfectamente, pero se te olvidó hacer lo mismo en el código var menu_entries = $('#menu li a'); Commented el 17 ene. 2017 a las 13:26
  • En el blog, tanto el script como el HTML tienen el identificador 'menu'. Y aún así sigue sin funcionar. :/ ¿Crees que las direcciones URL relativas sean el problema? Es decir, no uso enlaces externos. Commented el 17 ene. 2017 a las 21:07
  • Probablemnte, el código lo probé desde firefox incrustando directamente el script, y el código funciona como debería. Commented el 19 ene. 2017 a las 16:12
  • ¿Existe algún método para llegar a lo que quiero? Commented el 19 ene. 2017 a las 16:42

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.