2

tengo el siguiente problema: hace un tiempo adapte un script jQuery para un menú que cambia el interior de una página ocultando y mostrando el contenido según el link que se presione, el contenido esta en una sola página y no se como hacer para que al recargar la web se mantenga en el contenido que indica el link

aca el codigo:

$(document).ready(function(){
  var ultimo=1;
	$('#menu-sup li a').click(function(){
		// obtenemos el nuevo id
		nuevo=$(this).parent().attr("id");
		if(nuevo!=ultimo){
			// escondemos el ultimo id
			$("#cont"+ultimo).fadeOut(function(){
			$("#"+ultimo).removeClass("select");
			$("#"+nuevo).addClass("select");
			// mostramos el nuevo id
			$("#cont"+nuevo).fadeIn();
			ultimo=nuevo;
			});
		}
	});
});
.cont{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="seccion-p">
<div class="menu">
	<ul id="menu-sup">
		<li id="1" class="select "><a href="#inicio">Inicio</a> </li>
		<li id="2" ><a href="#Admisiones">Admisiones</a></li>
		<li id="3" ><a href="#Usuarios">Usuarios</a></li>
	</ul>
</div>

<div class="contenido-menu">
	<div id="cont1">contenido 1</div>
	<div id="cont2" class="cont">contenido 2</div>
	<div id="cont3" class="cont">contenido 3</div>
</div>
</div>

Editado. Encontré una manera no muy elegante de hacerlo, el script del click lo deje como función ckick_menu() luego obteniendo el hash y asignandolo a una variable que contiene el link del menú 'm_click' después repito el mismo código de la función click para luego hacer un trigger del click lo que permite que se cargue el contenido al recargar el sitio y finalmente llamo a la función click_menu() con el parámetro 'm_click' redefinido. Esto funciona no al 100% ya que si carga el contenido pero al hacer click en el otro menú no oculta la información que se recargó. Gracias por las respuestas :

$(document).ready(function(){
   function click_menu(menu_click){
  var ultimo=1;
  $(menu_click).click(function(){
     // obtenemos el nuevo id
     nuevo=$(this).parent().attr("id");
     if(nuevo!=ultimo){
       //ultimo = ultimo+1;// escondemos el ultimo id
	   $("#cont"+ultimo).fadeOut(function(){
	      $("#"+ultimo).removeClass("select");
	      $("#"+nuevo).addClass("select");
	      // mostramos el nuevo id
	      $("#cont"+nuevo).fadeIn();
	      ultimo=nuevo;	
       });
     }
  });
   }
hash = '[href="'+document.location.hash+'"]';
   if(hash){
  menu_click = '#menu-sup li a'+hash+'';
  $(menu_click).click(function(){
  var ultimo=1;
  // obtenemos el nuevo id
  nuevo=$(this).parent().attr("id");
  if(nuevo!=ultimo){
	// escondemos el ultimo id
	$("#cont"+ultimo).fadeOut(function(){
       $("#"+ultimo).removeClass("select");
	   $("#"+nuevo).addClass("select");
	   // mostramos el nuevo id
	   $("#cont"+nuevo).fadeIn();
	   ultimo=nuevo;
    });
  }
});
$(menu_click).trigger('click',);
menu_click = '#menu-sup li a';
click_menu(menu_click);
}
});

0

2 respuestas 2

0

Lo puedes hacer con el paso de varaibles de Session desde php a js o con variables de navegador que no se eliminan ni cerrando el navegador ejmplo asi:

$(document).ready(function(){
  var ultimo=1;
  //preguntas si la variable existe en el navegador
  if(localStorage.getItem("ultimo")!=null){
    //sino existe la crea
    localStorage.setItem("ultimo", ultimo);
  }else{
    //si ya existe, entonces le asignas su valor a la variable
    //manipulas normal el codigo
    ultimo = localStorage.getItem("ultimo");
    $('#menu-sup li a').click(function(){
      // obtenemos el nuevo id
      nuevo=$(this).parent().attr("id");
      if(nuevo!=ultimo){
        // escondemos el ultimo id
        $("#cont"+ultimo).fadeOut(function(){
        $("#"+ultimo).removeClass("select");
        $("#"+nuevo).addClass("select");
        // mostramos el nuevo id
        $("#cont"+nuevo).fadeIn();
        //y por ultimo le asignas el nuevo valor a la variable
        localStorage.setItem("ultimo", nuevo);
        });
      }
    });

  }
});

espero te sirva, me cuentas!

1
  • hola, Probé la recomendación pero no funcionó queda en el mismo lugar Gracias.
    – Felipe
    Commented el 31 ago. 2018 a las 15:05
0

Muy simple, existe una propiedad document.location.hash que contiene el hash del url (#Etiqueta).

Solo tienes que añadir esta pequeña funcionalidad a tu página

if(document.location.hash) $('a[href="'+document.location.hash+'"]').addClass('select');

dentro de

$(document).ready(function(){
   ...
});
1
  • hice los cambios pero queda igual al recargar el sitio, pero con el "hash" se me ocurrió otra manera no muy elegante
    – Felipe
    Commented el 31 ago. 2018 a las 15:03

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.