Establecerme dentro de una page en html
Hola saludos experto lo que necesito es como hago para que al hacer click en una página (bueno para que se entienda dejo esta dirección de la cual estoy construyendo http://www.tesaperusac.com/inicio.html aquí como veras se muestra una imagen que me ocupa casi la pantalla pero la información esta por la parte de abajo que el cliente deberá bajar para poder leerla, pero lo que pasa al hacer click en cualquiera de los link se carga la página y vuelve a mostrar la imagen lo que necesito es si hay una manera que al hacer click en cualquiera de los link la página llamada se establezca por la parte de abajo porque como veras se hace muy fastidioso para el cliente estar bajando a cada momento que hace click )alguna idea
1 Respuesta
Respuesta de krlosnow
1
La opción que a mi gusto quedaría mejor es usar ajax para cargar el
Como veo que usas jquery, lo que tendrías que hacer al pulsar en un enlace del menú lateral o superior, es llamar por ejemplo a:
... para cargar la info de la maquinaria. Eso sí: "maquinaria.html" solo contendría información de maquinaria, ni cabeceras, ni menús ni nada. Eso ya está cargado.
Si tienes dudas me lo dices y trato de echarte una mano.
<div id="content">.
Como veo que usas jquery, lo que tendrías que hacer al pulsar en un enlace del menú lateral o superior, es llamar por ejemplo a:
$("#content").load("maquinaria.html");... para cargar la info de la maquinaria. Eso sí: "maquinaria.html" solo contendría información de maquinaria, ni cabeceras, ni menús ni nada. Eso ya está cargado.
Si tienes dudas me lo dices y trato de echarte una mano.
Bueno no he entendido muy bien tu respuesta espero que me puedas ayudar un poco más de como podría hacer esto
Ok, vamos allá. Edita el contenido de tu página de inicio (inicio.html). Empecemos por ejemplo con el enlace de "Productos", que tienes justo debajo de la imagen grande. El código html es el siguiente:
<a href="productos.html?option=com_content&view=category&layout=blog&id=28&Itemid=55">
Dentro del anchor tienes más cosas, pero no las vamos a tocar. Tan solo nos interesa el link. Ahora, lo que estás haciendo es llamar a una página que se llama "productos.html", que contiene la imagen, la cabecera, ... TODO. Lo que yo te propongo es que te crees una página HTML que se llame "productos_content.html", que tan solo contenga la parte específica de productos, sin meter ni cabecera, ni imagen, ni menús ni nada. No importa que no metas nada de estilos ni script, porque en tiempo de ejecución, esa página se cargará dentro de "inicio.html", que sí contiene los estilos.
Una vez que ya tienes lista tu página "productos_content.html", es el momento de cambiar el enlace actual por este otro:
<a href="javascript:cargaContenido('productos_content.html', 'item55')">
El siguiente paso es construir la función "cargaContenido". La debes meter dentro de un tag
<script>, como otras funciones que ya tienes:
function cargaContenido(url, itemMenu){
$("#content").load(url);
//La parte de cambiar el estilo del item del menú lo tendrás que probar
$(".active").removeClass("active");
$("." + itemMenu).addClass("active");
}
Por lo que veo has tomado la opción de llamar a las páginas con un "#final", para posicionarte en un lugar concreto. La opción no es mala, pero te animo a que pruebes el load de jquery para cargar contenido parcial en la página. La experiencia de usuario es mucho mejor, ya que no se aprecian los molestos refrescos de pantalla. La elección es tuya.
<a href="productos.html?option=com_content&view=category&layout=blog&id=28&Itemid=55">
Dentro del anchor tienes más cosas, pero no las vamos a tocar. Tan solo nos interesa el link. Ahora, lo que estás haciendo es llamar a una página que se llama "productos.html", que contiene la imagen, la cabecera, ... TODO. Lo que yo te propongo es que te crees una página HTML que se llame "productos_content.html", que tan solo contenga la parte específica de productos, sin meter ni cabecera, ni imagen, ni menús ni nada. No importa que no metas nada de estilos ni script, porque en tiempo de ejecución, esa página se cargará dentro de "inicio.html", que sí contiene los estilos.
Una vez que ya tienes lista tu página "productos_content.html", es el momento de cambiar el enlace actual por este otro:
<a href="javascript:cargaContenido('productos_content.html', 'item55')">
El siguiente paso es construir la función "cargaContenido". La debes meter dentro de un tag
<script>, como otras funciones que ya tienes:
function cargaContenido(url, itemMenu){
$("#content").load(url);
//La parte de cambiar el estilo del item del menú lo tendrás que probar
$(".active").removeClass("active");
$("." + itemMenu).addClass("active");
}
Por lo que veo has tomado la opción de llamar a las páginas con un "#final", para posicionarte en un lugar concreto. La opción no es mala, pero te animo a que pruebes el load de jquery para cargar contenido parcial en la página. La experiencia de usuario es mucho mejor, ya que no se aprecian los molestos refrescos de pantalla. La elección es tuya.
