Menú jQuery para no recargar la página
En este artículo vamos explicar detalladamente como obtener un menú horizontal con varios links que al pulsarlos se cargue el contenido en un div sin recargar totalmente la página.
Lo primero que deberemos hacer para obtener lo que se menciona es incluir en el <head> de vuestra página los scripts necesarios jQuery y una función por cada link para hacer una llamada al archivo php que toque.
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
function mostrarContenido(){
var variable_post="Mi texto recargado";
$.post("includes/contenido.php", { variable: variable_post }, function(data){
$("#recargado").html(data);
});
}
function mostrarContenido1(id){
var variable_post=id;
$.post("includes/contenido1.php", { variable: variable_post }, function(data){
$("#recargado").html(data);
});
}
function mostrarContenido2(id){
var variable_post=id;
$.post("includes/contenido2.php", { variable: variable_post }, function(data){
$("#recargado").html(data);
});
}
function mostrarContenido3(id){
var variable_post=id;
$.post("includes/contenido3.php", { variable: variable_post }, function(data){
$("#recargado").html(data);
});
}
</script>
Como vemos, las funciones que estamos añadiendo le estamos pasando una id que podría ser útil en aquellos casos que querramos mostrar registros de según que elemento. Seguidamente, abrimos mediante el método POST un ficher php donde estará el contenido a mostrar en la parte dinámica que será el <div> con id=»recargado».
Después, en nuestro <body> deberemos mostrar los links que recargarán los contenidos. Utilizamos el evento onclick para llamar a la función que corresponda para recargar en el <div> correspondiente el archivo php que toque.
<ul> <li><a href="#" onclick="javascript:mostrarContenido();">Contenido</a></li> <li><a href="#" onclick="javascript:mostrarContenido1(105);">Contenido 1</a></li> <li><a href="#" onclick="javascript:mostrarContenido2(105);">Contenido 2</a></li> <li><a href="#" onclick="javascript:mostrarContenido3(105);">Contenido 3</a></li> </ul>
El tema estilos lo dejo en vuestras manos.
Autor
¿Buscas trabajo de programador?
8 respuestas a “Menú jQuery para no recargar la página”
Deja una respuesta
33 artículos que te podrían interesar
Ver más sobre
Me puedes compartir tu código completo por favor, soy nuevo en esto y me gustaría tenerlo para entender como funciona.
Gracias
Buen día, alguien seria tan amable de darme una mano con esto de cargar un archivo html en un div en intentado muchas veces pero no obtengo el resultado que espero , he visitados diferentes posts y las soluciones son muy similares a esta, le agradezco ala persona que me pueda colaborar.
es perfecto!!! simplemente genial, aunque ocupa mucho espacio, me he creado un include para meter todo el contenido de head, ya que son mas de 20 menus.
muchas gracias!!
como apunto a donde quiero cargar la pagina? por que tengo .contain y .sidebar1
necesito que se carge en sidebar1 dejando footer, header, contain intactos.
gracias por la informacion
Pues deberás ponerlo así:
$(«.sidebar1″).html(data);
Cargando los datos en el contenedor con class=»sidebar1»
es perfecto!!! simplemente genial, aunque ocupa mucho espacio, me he creado un include para meter todo el contenido de head, ya que son mas de 20 menus.
muchas gracias!!
Hola, muy buen ejemplo, pero no me funciona. Se queda sin hacer nada y en la barra navegación solo aparece un #
Seguro has añadido todo lo necesario? script y archivos php? donde tienes el ejemplo para hecharle un vistazo?