Como alterar apenas o conteúdo quando clicar

Como alterar apenas o conteúdo quando clicar

Posted on Posted in Desenvolvimento Web, JavaScript, Tutoriais

Olá pessoal, hoje eu trouxe para vocês um tutorial simples de como alterar apenas o conteúdo quando clicar em menu ou botão, em outras palavras, alterar só determinada parte da página quando clicar. Fiz com jQuery – AJAX simples, provavelmente há outras maneiras melhores de fazer isso, mas foi a forma que encontrei de fazer quando precisei em um site que eu estava desenvolvendo.

Vamos ao passo a passo:

1 – Crie a página principal e as páginas com os conteúdos. Fiz um exemplo bem simples, cujos conteúdos são apenas imagens, só para demonstração.

Página Principal:

Conteúdo 1 (bloco1.php):

Conteúdo 2 (bloco2.php):

Conteúdo 3 (bloco3.php):

Descrição do código: Botão voltar ao início, itens do menu e div responsável por exibir o conteúdo, todos com os ‘ids’ que serão chamados no JavaScript.

2 – Crie o arquivo JavaScript, aqui denominei de ajax.js, chamando os ‘ids’ previamente definidos no HTML, o “load” é responsável por carregar a página com o conteúdo desejado:

Confira a demonstração do exemplo: Clique Aqui!

Qualquer dúvida ou dica deixem nos comentários, ficarei feliz em responder!

Espero que tenham gostado do tutorial, deixem seus comentários e compartilhem o post.

Até a próxima, beijos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *