jQuery: Criando abas (tabs) simples

Blog

jQuery: Criando abas (tabs) simples
Enviado em 07/02/2012 01:18

Precisando criar umas abinhas em seu site? Há muitos scripts na internet para isso, não é verdade? Contudo, este é especial por ser muito simples e relativamente fácil de entender. Você poderá assim modificá-lo sem sofrimento para atender suas necessidades. Vamos lá?

Apresentando o HTML utilizado no exemplo

<div id="caixa">

	<!-- Abas -->

	<p id="abas">
		<a href="#aba1" class="selected">Aba 1</a>
		<a href="#aba2">Aba 2</a>
		<a href="#aba3">Aba 3</a
	</p>
	
	<!-- Conteúdo das abas -->
	
	<ul id="conteudos">
	
		<!-- Aba 1 -->
	
		<li id="aba1">
		
			<h2>Demonstração de texto1</h2>					
			<p>Lorem ipsum dolor sit amet</p>

		</li>
		
		<!-- Aba 2 -->
		
		<li id="aba2">
		
			<h2>Conteúdo da aba #2</h2>
			<img src="http://wowppr.com/719-thumb.jpg" width="750" height="480" border="0" />
			
		</li>
		
		<!-- Aba 3 -->
		
		<li id="aba3">
		
			<h2>Trololooooooo</h2>
			<iframe width="756" height="480" src="http://www.youtube.com/embed/v1PBptSDIh8" frameborder="0" allowfullscreen></iframe>
			
		</li>
		
	</ul>

</div>

... agora, o CSS que vai embelezar suas abas...


div#caixa 
{
	display: inline-block; 
	width: 800px;
	height: 600px;
}
	div#caixa p#abas 
	{
		display: inline-block; 
		width: 790px; 
		height: 40px; 
		margin: 0 10px 0 10px; 
		padding: 0; 
		overflow: hidden; 
		vertical-align: bottom;
	}
		div#caixa p#abas a 
		{
			display: inline-block; 
			font-size: 14px; 
			font-weight: bold; 
			color: #666; 
			text-decoration: none; 
			padding: 12px 26px 12px 26px; 
			margin: 0 5px 0 0; 
			background-color: #f0f0f0;
		}
			div#caixa p#abas a:hover 
			{
				background-color: #999; 
				color: white;
			}
			div#caixa p#abas a.selected 
			{
				background-color: #ffcc00; 
				color: #000;
			}
	div#caixa ul#conteudos 
	{
		display: inline-block; 
		width: 798px; 
		height: 558px; 
		margin: 0; 
		padding: 0; 
		border: 1px solid #ccc;
	}
		div#caixa ul#conteudos li 
		{
			display: inline-block; 
			width: 758px; 
			height: 528px; 
			margin: 10px 20px 10px 20px; 
			padding: 0; 
			overflow: auto;
		}

... e por fim, a função jQuery!

/* Função que carrega script das abas */

$.abasSimples = function ()
{

	/* Guarda IDs dos elementos */

	var abas = 'p#abas';
	var conteudos = 'ul#conteudos';
	
	/* Oculta todas as abas */
	
	$(conteudos + ' li').hide();
	
	/* Exibe a primeira aba */
	
	$(conteudos + ' li:first-child').show();
	
	/* Quando uma aba for clicada */
	
	$(abas + ' a').click(function()
	{
	
		/* Remove todas as classes de todas as abas */
	
		$(abas + ' a').removeClass('selected');
		
		/* Acrescenta uma classe CSS marcando visualmente a aba como selecionada */
		
		$(this).addClass('selected');
		
		/* Oculta todas as abas abertas */
		
		$(conteudos + ' li').hide();
		
		/* Exibe a aba que foi clicada */
		
		$(conteudos +  ' ' + $(this).attr('href')).show();
		
		/* Fim :D */
		
		return false;
		
	});
	
};

O resultado você confere nesta demonstração!
Opcionalmente, você poderá baixar este HTML com o código comentado para seu auxílio.

Abraços a todos e bom trabalho! ;)

- Felipe comentou em 13/02/2012 14:07:
- Excelente ! Adorei o vídeo ! kkk
- Guilherme comentou em 13/02/2012 14:14:
- O vídeo fecha o script com chave de ouro kkkkkkk... abraço!