Abas com Jquery

Aprenda a fazer Abas com Jquery para seu site.

Bom, uma coisa muito utilizada para o desenvolvimento de sites, são abas, mas como assim abas ? Veja aqui o Exemplo.

Uma forma simples de fazer as abas são com jquery e você poderá aprender isso aqui. Bom, vamos lá, o que precisamos para fazer isso ?

Primeiro temos que linkar a galeria jquery, desta forma, colocando antes do fechamento body por questões de carregamento.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Logo depois criaremos um arquivo com externo com extensão .js chamado abas.js e nele colocamos o seguinte código:

$(document).ready(function(){
	$("#content .conteudo:nth-child(1)").show();
	$(".aba").click(function(){
		$(".aba").removeClass("ativa");
		$(this).addClass("ativa");
		var indice = $(this).parent().index();
		indice++;
		$("#content .conteudo").hide();
		$("#content .conteudo:nth-child("+indice+")").show();
                return false;
	});
});

Ok, vamos entender o código, na primeira linha damos inicio ao documento

Na segunda linha, dizemos que a primeira div estara com o display: block, com o .show(), o :nth-child(1) dizemos a primeira, se fosse a segunda dentro dos parenteses colocaríamos 2, 3, 4…

Na terceira damos ação ao clique sobra a classe .aba, assim dizemos para remover todas as classes .ativa e adicionar a mesma na aba clicada, logo abaixo pegamos o índice da aba e dizemos que as classes .conteudo terão que sumir com .hide() e a do mesmo índice aparecera com o .show().

Em seguida teremos o HTML que utilizaremos para isso, veja só:

<div id="abas">
	<nav id="menu">
		<ul>
			<li>
				<a href="#" class="aba">
					Aba 1
				</a>
			</li>
			<li>
				<a href="#" class="aba">
					Aba 2
				</a>
			</li>
			<li>
				<a href="#" class="aba">
					Aba 3
				</a>
			</li>
			<li>
				<a href="#" class="aba">
					Aba 4
				</a>
			</li>
		</ul>
	</nav>
	<div id="content">
		<div class="conteudo">
			Conteúdo da aba 1 
		</div>
		<div class="conteudo"> 
			Conteúdo da aba 2 
		</div> 
		<div class="conteudo"> 
			Conteúdo da aba 3 
		</div> 
		<div class="conteudo"> 
			Conteúdo da aba 4 
		</div> 
	</div> 
</div>

E em por fim o CSS, colocando em um arquivo externo com extensão .css, ou em seu próprio css

*{
    margin: 0;
    padding: 0;
    list-style: none ;
    font-family: 'Arial','Sans-Serif';
}

#abas {
	margin: 10px auto 0;
	width: 500px;
}

nav#menu {
	float: left;
	width: 100%;
}

nav#menu ul li {
	float: left;
	margin: 0 5px 0 0;
}

nav#menu ul li a {
	padding: 5px 15px;
	text-decoration: none;
	color: #000; /* Cor do Texto da aba */
	background-color: #CCC; /* Cor do Fundo da aba */
	text-decoration: none;
	float: left;
}

nav#menu ul li a:hover,
nav#menu ul li .ativa{
	background-color: #747474;  /* Cor do hover/aba ativa do Fundo da aba */
	color: #FFF;/* Cor do hover/aba ativa do Texto da aba */
}

.conteudo {
	display: none;
	float: left;
	clear: both;
	width: 96%;
	padding: 10px 2%;
	border: 1px solid #CCC;
}

Veja o exemplo de como ficaram as abas com jquery clicando aqui.