JQuery UI - Tabs (Abas)

Abas
Bibliotecas
Criação de Abas
Html
Código
Menu

As abas são componentes usados nas interfaces gráficas de uma aplicação. As tabs ou abas servem para organizar as informações de uma forma intuitiva e elegante. No HTML não existe nenhum componente desse tipo. Para obtê-los é necessário o uso de outras bibliotecas. Na internet encontram-se disponibilizadas várias bibliotecas de terceiros, que podem ser usadas e são independentes de plataforma.
Observação: Para ver o código dessa página clicar em cada uma das abas acima.

Existem várias bibliotecas à disposição; no entanto pela facilidade de uso e eficiência, a biblioteca jQuery UI, é uma das mais utilizadas. Veja como criar uma estrutura em abas (tabs) de forma rápida e simples.

Em primeiro lugar, importar a folha de estilos e os scripts da jQuery e jQuery UI.

<head>
<title>JQuery UI - Tabs (Abas)</title>

<link rel="stylesheet" type="text/css" href="/css/ui-lightness/
jquery-ui-1.10.4.custom.css" />
<script type= "text/javascript" src= "/static/js/jquery.min.js"></> 
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>
<script type= "text/javascript>
</head>

Para construção de abas usa-se um container (div de abas) e dentro dele o framework fará a interpretação, assim: Ao achar uma ul ela vai representar as abas. Abaixo dessa ul as divs que representem o conteúdo -pode ser qualquer tipo- de cada uma das abas. Nesse exemplo foi feita uma lista com cinco itens. O primeiro item é aba que abre a primeira div encontrada dentro do container de abas. O segundo elemento da lista abre a segunda div e assim sucessivamente. A quantidade de elementos fica a critério. Lembre-se: para cada elemento é necessário uma div correspondente.

No Html: 

<div id="tabs">
<ul>
<li><a href= "#um">Abas</a></li>
<li><a href= "#dois">Bibliotecas</a></li>
<li><a href= "#tres">Criação das Abas</a></li>
<li><a href= "#quatro">Html</a></li>
<li><a href= "#cinco">Código</a></li>
</ul>  

<div id="um"> 
     <ul> 
     <p>Escreva o texto aqui.</p> 
</div> 

<div id="dois"> 
     <ul> 
     <p>Escreva o texto aqui.</p> 
</div> 

<div id="tres"> 
     <ul> 
     <p>Escreva o texto aqui.</p> 
</div> 

<div id="quatro"> 
     <ul> 
     <p>Escreva o texto aqui.</p> 
</div> 

<div id="cinco"> 
     <ul> 
     <p>Escreva o texto aqui.</p> 
</div> 
</div>

O código é bem simples:

<head> 
/*Como já foi dito aqui vai a folha de estilos e os
 scripts da jQuery e jQuery UI.*/
Instalação da Jquery UI
			 
<script type= "text/javascript">
	$(function() {
	   
	$("#tabs").tabs();
	});
</script> 
</head>