JQuery UI - Tabs (Abas)

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.

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>