Boa tarde a todos ae!
Vou colocar aqui um tutorial simples e bem fácil de se fazer sobre navegação sem refresh usando JQuery muitas vezes eu já procurei por isso e é bem interessante.
A estrutura é simples você terá uma div que receberá os dados dos links que funcionará basicamente como um famigerado iframe, mas de uma forma melhor.
Lembrando que este código pode servir para uma navegação com abas só que de uma forma diferente a dica é não deixar as páginas muito pesadas pq se não a performance vai cair bastante deixando o site lento.
Nos próximos tutoriais vou fazer um de accordion novamente e um de abas com imagens e algumas outras funcionalidades que não fiz no outro e também vou fazer um novo sobre menu com slider em breve acredito que nesta semana ainda teremos aqui versões melhoradas dos tutoriais antigos e também vou começar uma série de tutorias sobre php do básico até onde eu sei rs
Vamos ao código, aqui segue o código em JQeury.
$(document).ready(function (){
$(“#conteudo”).load(“index.html”); //Aqui ele faz com que a página carregue o arquivo index.html na div conteudo assim que ele carregar, você pode usar o nome de arquivo que quiser eu deixei este no exemplo para ficar mais intuitivo
$(“.links”).click(function(){ //Evento de clique em algum item do menu
$(“#conteudo”).fadeOut(10); //Aqui faz a div conteudo dar um efeito de fade out para
$(“#conteudo”).load($(this).attr(“href”)); //Aqui carregar o conteudo que é carregado pelo atributo href do link pode por exemplo um span com um atributo name ai você pode usar do modo que quiser.
$(“#conteudo”).fadeIn(1000); //Aqui faz um efeito de fade in na div conteudo com o conteudo já carregado
return false; //Aqui ele faz com que o link não seja carregado, assim ele só carrega o conteudo do arquivo na div aqui no caso a div conteudo
});
});
Aqui eu vou colocar um exemplo em HTML com duas páginas e um menuzinho simples você pode
<div id=”root”>//Div para servir de caixa para segurar todos os elementos
<div id=”menu”> //Div para guardar os links
<a href=”index.html” style=”background:#f0f0f0;”>Home</a> //Link home ele começa com a cor diferente
<a href=”contato.html”>Contato</a>//Link de contato mais pode ser qualquer um.
</div>//Fecha a div menu
<div id=”conteudo”> //Div que vai receber os dados
</div> //Fecha a div conteudo
</div>//Fecha a div root
E aqui eu vou colocar o css que eu usei só para não ficar muito tosco
#root{ //Uma largura na root para ficar um em cima do outro
width:300px;
}
#menu{ //Menu com float para uma div ficar em cima da outra
wdth:auto;
height:25px;
float:left;
}
.links{ //Link com background, margin e padding para dar uma aparencia de aba
margin:0 10px;
background:silver;
padding:5px;
}
#conteudo{ //Um estilo na div conteudo para dar aparência de caixa
border:1px solid #000;
padding:5px;
float:left;
width:auto;
height:100px;
}
A estrutura é simples é possivel fazer muita coisa com esse código simples
Para baixa o zipado clique aqui
Para ver o site funcionando clique aqui
Até mais
