Navegação em abas com jQuery

Olá galera, desenvolvi um menu de navegação por abas simples e responsivo para ser usado em páginas WEB. O menu é simples, feito com HTML5, CSS3 e jQuery, espero que vocês gostem.

[button color=”orange” size=”medium” link=”https://clubedosgeeks.com.br/uploads_demos/abasjqyery/” target=”blank” ]Demo[/button] [button color=”orange” size=”medium” link=”clubedosgeeks.com.br/uploads_demos/abasjqyery/abas.rar” target=”blank” ]Download[/button]
Primeiro nós precisamos criar dois arquivos, o index.html e o estilo.css e salvar em uma só pasta, depois copiar para esta pasta o arquivo jquery.js, que deve ser baixado no site jquery.com. No arquivo index.html faça a chamada do jQuery com o seguinte código:

E a chamada da folha de estilo CSS, assim:

O seu arquivo index.html, deve ficar da seguinte forma:

	




	
Menu 1
	
Menu 2
	
Menu 3
	
Menu 4
	
Menu 5



Texto do Conteúdo da primeira página


Texto do Conteúdo da segunda página


Texto do Conteúdo da terceira página



Texto do Conteúdo da quarta página



Texto do Conteúdo da quinta página

O seu arquivo estilo.css deve ficar assim:

.abas{width: 100%;text-align: center;margin: 0;height: auto;padding: 0;}
.item_aba{display: inline;border: 1px solid black;margin: 0;border-top-left-radius:10px;border-top-right-radius:10px;background: white;padding:5px 30px 5px 30px}
.ativo{border-bottom: none; background:#D1D1D1; }
.conteudo{width: 80%; height: 100px; display: table;background: #D1D1D1;margin: 0 auto;}
.conteudo p{margin: 20px;}