Problem when reloading page and maintaining content

Question

Problem when reloading page and maintaining content

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I have the following problem: some time ago I adapted a jQuery script for a menu that changes the inside of a page hiding and showing the content according to the link that is pressed, the content is on a single page and I do not know how to do it so that when reloading the web it stays in the content indicated by the link

here the code:

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

Edited. I found a not very elegant way of doing it, the script of the click I leave it as a function ckick_menu () then getting the hash and assigning it to a variable that contains the link of the menu 'm_click' then I repeat the same code of the function click to then do a trigger of the click which allows the content to be loaded when reloading the site and finally I call the function click_menu () with the parameter 'm_click' redefined. This works not 100% since if you load the content but when you click on the other menu it does not hide the information that was reloaded. Thanks for the answers:

$(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);
}
});

javascript jquery html

asked by Felipe 30.08.2018 в 21:54

source

2 answers

0

Very simple, there is a property document.location.hash that contains the hash of the url (#Tags).

You just have to add this little functionality to your page

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

inside

$(document).ready(function(){
   ...
});

answered by 30.08.2018 в 22:16

DataFrame cleanup model geometric distribution

score 0 · Accepted Answer

You can do it with the step of session varaibles from php to js or with browser variables that are not deleted or closing the browser eg:

$(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);
        });
      }
    });

  }
});

I hope you serve, you tell me!