1

Buenos días a todos, el post es para pedir ayuda con un proyecto que estoy elaborando para el instituto, se nos pide hacer un sistema de mesa de ayuda (manejo de tickets de atención) y un cuadro de mando (reportes en cuadros estadísticos, etc.)

Estoy trabajando en el diseño de las páginas (ya que son web), estoy usando el IDE NetBeans, juntamente con CSS, Bootstrap 3 y JQuery, es la primera vez que entro a esto del diseño de páginas web con CSS y Bootstrap nunca me enseñaron y tuve que aprender leyendo, ahora si explico mi problema:

Sucede que he creado un header y un footer por separado, cosa que diseño el contenido (llamémosle index.jsp y sólo referencio a mi header con:

<%@include file="WEB-INF/jspf/headerAdministrator.jspf" %>

para que aparezca en la parte de arriba del contenido) el problema surge ya que tengo un NavBar agregado en el header, con unas 5 opciones, al seleccionar una me redirige a una página y como está yendo a otra vuelve a cargar todo (hasta el header), encontré una función en Javascript que te permite alternar la clase "active" entre las opciones que tienes en la barra de navegación, pero como selecciono uno y carga TODA la página incluyendo el header, la selección (o mejor dicho la función donde agrega la clase active desaparece) dejaré una imagen de referencia.

Lo que quería saber, es cómo hacer para que lo único que tenga que cargar sea el contenido, ya que el header y footer nunca van a variar, gracias.

2 respuestas 2

1

Por lo que entiendo de tu pregunta, tu problema es que al seguir el enlace de un elemento de la cabecera te carga otra página y por lo tanto tu cabecera sigue sin tener el "active" correspondiente.

Siendo así, la opción más sencilla y la correcta es que edites tu página de destino para que tenga el "active" correctamente y prescindas de javascript.

Si aún así quieres hacerlo como tenías pensado, puedes utilizar un iframe para incrustar el contenido de una dirección en la página. Por lo tanto tendrías tu header y el iframe, bastaría con cambiar el iframe al hacer click.

Ten en cuenta que la solución del iframe no es la mejor.

4
  • Gracias por tu respuesta, es masomenos lo que quise dar a entender, pero lo ideal sería saber cómo hacer una página maestra (creo que ese es el término), lo único que cargaría es el contenido mas no el header ni el footer. Commented el 14 dic. 2016 a las 23:49
  • La manera de hacerlo sería con iframes (empleando solo html, claro). Aunque te recomiendo repensar la solución, ya que los iframes son antiguos. Commented el 15 dic. 2016 a las 15:56
  • Perdona que abuse de tu confianza, muchas gracias por las respuestas, en si llevo JSP pero solo programación, lo que es diseño CSS y demás los he aprendido por mi cuenta, podrías recomendarme alguna guía sobre el tema? Te estoy muy agradecido de antemano. Commented el 15 dic. 2016 a las 17:00
  • Puedes empezar por LibrosWeb que está en español, tienen lo básico sobre HTML, CSS y Bootstrap. En w3Schools tienes una amplia referencia sobre HTML y CSS, también tienen un tutorial, eso sí, en inglés. Si te ha sido de ayuda la respuesta, no te olvides de marcarla como resuelta. Commented el 15 dic. 2016 a las 18:24
0

Saludos, se ve que eres bien autodidacta, pero recuerda no perder el objetivo de terminar el proyecto. Te recomiendo que busques en las plantillas de bootstrap: TemplatesGratisBootstrap Ahi podras encontrar muchos proyectos ya listos con bootstrap enfocados a temas particulares, que podrás descargar y estudiarlos, es un poco más puntual y facil a veces para comenzar.

1
  • Muchas gracias Cybersoul, al final sólo hice un header por cada página que mostraré, agregandole la clase "active" al enlace que se mostrará en ese momento, de manera que ahorro tiempo y no me complico tanto, muchas gracias nuevamente! Commented el 5 ene. 2017 a las 16:11

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.