mostrar / ocultar contenido usando jquery o ajax

Actualmente estoy diseñando un enlace de página web. En la pestaña de proyectos del sitio me encuentro con un problema ya que no tengo experiencia en el protocolo adecuado (lo siento). En el menú lateral, habrá una opción para seleccionar que se muestre algún contenido (CAD, FEA, MATLAB, etc.) y luego, el que se seleccione se mostrará en la sección de contenido principal del sitio. El problema al que me estoy enfrentando es que cuando uso javascript / jquery para tener todo el contenido en 1 página y luego mostrar / ocultar las diversas secciones como el usuario selecciona usando anchors, la página se carga muy lentamente ya que hay un montón de contenido . Me preguntaba si es mejor usar AJAX para una situación como esta y, de ser así, ¿cómo podría cargar este nuevo contenido en la sección de contenido (usar un iframe o crear una nueva página? Aún no sé ajax pero estoy dispuesto / ansioso por aprender ) o si es mejor quedarme con jquery show / hide estándar y, de ser así, ¿qué hace que uno prefiera más que el otro? Este contenido que estoy cargando va a ser contenido estático por cierto

Puede usar jQuery ajax para cargar el contenido a pedido. load método de load es apto para esto.

Creo que estás confundido con jQuery y ajax. jQuery es una biblioteca de JavaScript para hacer nuestra vida más fácil. Sin jQuery también, puedes hacer ajax, pero como dije, nos hace la vida más fácil. entonces vamos a usar eso

Suponiendo que tiene un marcado como este en su página principal para mostrar los enlaces o menús y otro div para mostrar el contenido de los enlaces y que incluye la biblioteca jQuery también en esta página.

  

Ahora escuchemos el evento click de cualquiera de estos enlaces y luego carguemos el contenido del objective de los enlaces de forma asíncrona y carguemos el resultado de la llamada asincrónica a nuestro div de contenido.

Añadir este javasctipt

  

Qué estamos haciendo aquí ?

# 1: estamos buscando el evento click de toda la etiqueta a en el DOM con un nombre de clase css ajaxLink. Cada vez que ocurre un clic en un evento, el código interno se ejecutará.

  • Si queremos seleccionar elemento (s) con nombre de clase, usamos $(".className") , donde className es el nombre de clase CSS del elemento. En nuestro ejemplo, le estamos diciendo a jquery que nos dé todas las tags de anclaje con ese nombre de clase.

  • Si queremos seleccionar un elemento) con ID, usamos $("#elementID") , donde elementID es el ID de CSS del elemento.

Más sobre los selectores jQuery aquí .

# 2: Vamos a cargar el contenido de forma asincrónica sin que la página se dirija realmente a la URL de destino. Entonces, debemos evitar el comportamiento predeterminado de un clic de enlace. estamos utilizando el método preventDefault (escrito en la biblioteca jQuery) para hacer esto. por lo que la página se mantendrá tal como está. Sin recarga.

# 3: estamos leyendo el valor de la propiedad href de nuestro enlace y estableciendo ese valor en una variable local. $(this) significa el elemento activado actual. Debido a que estamos trabajando dentro del evento clink de una etiqueta de anclaje, $(this) significa el elemento de anclaje presionado.

# 4: Estamos haciendo una llamada ajax usando el método de carga (en jQuery); Este método cargará el contenido de la url de destino y lo establecerá como el html interno del div con Id divContentArea .

Te recomiendo que juegues con un código de muestra. Coloque alert / console.debug en las variables / objetos y vea qué valor viene. Esa es la mejor manera de aprender esto. Buena suerte.

Última statement (puramente personal): jQuery es una de las mejores cosas que he visto recientemente.

Intenta usar Ajax, asegúrate de que cada contenido incluido se pueda cargar por separado, como si estuvieras usando iframe.

Crea un contenedor de contenido, luego usa Jquery ajax

 $.ajax({ url: 'targethtml.html', success: function(data) { $('#containerid').html(data); } }); 

eso es.

Aquí está el ejemplo de trabajo de su problema simple show y hide usando la biblioteca jquery

En realidad, no creo que el Ajax puro sea la mejor solución en este caso. Una razón es que las personas con JavaScript desactivado en su navegador no podrán navegar por su sitio. En segundo lugar, y quizás aún más importante, obtendrá una puntuación muy mala en los motores de búsqueda, ya que los rastreadores no suelen ejecutar javascript y, por lo tanto, no indexarán la mayor parte de su contenido.

Te aconsejo que trabajes con un conjunto estándar de páginas html / php. Puede crear una página base para el contenido que sea el mismo en cada página, como menú, encabezado, pie de página y diseño. En esta plantilla, puede incluir el contenido que es diferente para cada página, que sería el texto y html que está cargando ahora en su área de contenido. Esto se puede hacer fácilmente con algún script del lado del servidor como php. Realmente no es difícil de lograr y mantiene su código fácil de mantener. Tener diferentes páginas reales resolverá los problemas con usuarios none-js y SEO que describí anteriormente.

Una vez que haya configurado esta estructura, puede seguir utilizando ajax tal como lo describe @Shyju, para ofrecer a los usuarios con js una mejor experiencia. Tendría que establecer los enlaces en el menú a las páginas reales para usuarios que no son js, y luego puede sobrescribirlos con jQuery de la manera en que ya se ha demostrado. Todo lo que tendría que hacer es hacer que la llamada Ajax busque las páginas que contienen el contenido específico de su página. Esto podría ser fácilmente las mismas páginas que la secuencia de comandos del lado del servidor utiliza para incluir en la plantilla de la página