2012-06-06 21 views
5

Básicamente tengo una página web que tiene un div id = "contenido" y una div id = "barra lateral",cambiar el contenido del div cuando se hace clic en el enlace/botón

Lo que me gustaría hacer es cambiar la contenido en el contenido div cuando se hace clic en un enlace/botón en la barra lateral sin tener una página serpetada para cada artículo.

La razón es;

Estoy haciendo una página BIO para algunas bandas múltiples y habría varios botones para cada banda, cuando un usuario hace clic en el botón/enlace, el contenido cambiará.

Alguna idea, he estado buscando en .click usando jQuery o tal vez PHP pero no estoy seguro de cómo implementarlo.

Respuesta

7

Se puede poner cada uno de los artículos en un archivo HTML en su servidor, cada uno con un div envuelto alrededor de él, como este (digamos que el archivo se llama myArticles.html y está en la misma carpeta que la página principal):

<div id='article1'> 
    <b>ARTICLE 1</b> This is my first article 
</div> 

<div id='article2'> 
    <b>ARTICLE 2</b> This is my second article 
</div> 

a continuación, utilice la función de jQuery .load para cargar estos datos utilizando AJAX en su página.

Supongamos que su botón para el artículo 1 tiene id = 'articleButton1' y 2 tiene id = 'articleButton2' (y ambos con href = '#', entonces la página no cambia) entonces este jQuery funcionaría:

$('#articleButton1').click(function(){ 
    $('#content').load('myArticles.html #article1'); 
} 

$('#articleButton2').click(function(){ 
    $('#content').load('myArticles.html #article2'); 
} 

Este recoge el div correcta de la página en su servidor y lo pone en el #content div

+0

"Supongamos que su botón para el artículo 1 tiene id = 'articleButton1' y 2 tiene id = 'articleButton1'". Ambos tienen los mismos id? ¿No debería el .click estar en "articleButton1" en lugar de en el artículo div? – Playmaker

+0

Buen lugar, fijo – Timm

+0

gracias, mucho por la respuesta. Tengo una implementación en funcionamiento basada en su sugerencia. Gracias – SamCulley

Cuestiones relacionadas