You are here: Home Linguagens HTML / CSS Abas (tabs) com jQuery e CSS
   

Abas (tabs) com jQuery e CSS

  • Print
(0 - user rating)
User Rating:  / 0
PoorBest 
Details
Details
Category: HTML e CSS
Published on Saturday, 30 April 2011 18:59
Written by Bruno Vinícius Camacho
Hits: 1622

Fala pessoal, depois de um bom tempo sem colocar nada de html / css, resolvi colocar este tutorial sobre abas (tabs) em páginas html. Para conseguir o efeito, usaremos a classe jquery e também um pouco de css.

Vejam o resultado final aqui: Demo

 

Neste tutorial usaremos listas não ordenadas (unordered list – tag ul), uma div container e divs com o conteúdo das abas. Cada item da lista terá um link (href) que será igual ao ID da div .cont_tab. Isso é necessário para que o jquery consiga fazer as ações. Tenha em mente que eu usei os nomes “tab1”, “tab2” como exemplo, você deve alterar para que o código fique semântico e ajude no SEO (Search Engine Optimization) do site.

Bom, chega de enrolação e vamos aos passos.

 

1. Em primeiro lugar, baixe a classe jquery, disponível aqui: http://code.jquery.com/jquery-1.5.2.js (clique com o botão direito e escolha salvar como). Crie uma pasta chamada js e coloque esse arquivo nela.

2. Vamos agora criar o html. Digite o código abaixo e salve como tabs.html:

"tabs.html"

View source
  1.  
  2.  
  3.  
  4.  
  5. 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7.  
  8.  
  9. 	<html xmlns="http://www.w3.org/1999/xhtml">
  10.  
  11.  
  12.  
  13. 	<head>
  14.  
  15.  
  16.  
  17. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  18.  
  19.  
  20.  
  21. 	<link rel="stylesheet" type="text/css" href="/css/tabs.css" />
  22.  
  23.  
  24.  
  25. 	<script type="text/javascript" src="/js/jquery-1.5.2.js"></script>
  26.  
  27.  
  28.  
  29. 	</head>
  30.  
  31.  
  32.  
  33. 	<ul class="tabs">
  34.  
  35.  
  36.  
  37. 	<li><a href="#tab1">Aba 01</a></li>
  38.  
  39.  
  40.  
  41. 	<li><a href="#tab2">Aba 02</a></li>
  42.  
  43.  
  44.  
  45. 	</ul>
  46.  
  47.  
  48.  
  49. 	 
  50.  
  51.  
  52.  
  53. 	<div class="tab_container">
  54.  
  55.  
  56.  
  57. 	<div id="tab1" class="cont_tab">
  58.  
  59.  
  60.  
  61. 	Conteudo da aba 01
  62.  
  63.  
  64.  
  65. 	</div>
  66.  
  67.  
  68.  
  69. 	<div id="tab2" class="cont_tab">
  70.  
  71.  
  72.  
  73. 	Conteudo da aba 02
  74.  
  75.  
  76.  
  77. 	</div>
  78.  
  79.  
  80.  
  81. 	</div>
  82.  
  83.  
  84.  
  85. 	</body>
  86.  
  87.  
  88.  
  89. 	</html>
  90.  
  91.  
  92.  
  93.  

3. Vamos agora criar o css. Crie uma pasta chamada css. Digite o código abaixo e salve como tabs.css na pasta que você acabou de criar.

Show/Hidden css code

View source
ul.tabs {
 
	margin: 0;
 
	padding: 0;
 
	float: left;
 
	list-style: none;
 
	height: 32px; /*--Define a altura das abas--*/
 
	border-bottom: 1px solid #999;
 
	border-left: 1px solid #999;
 
	width: 100%;
 
	}
 
	ul.tabs li {
 
	float: left;
 
	margin: 0;
 
	padding: 0;
 
	height: 31px; /*--diminui 1px da altura da lista nao ordenada--*/
 
	line-height: 31px; /*--Alinha o texto verticalmente na aba--*/
 
	border: 1px solid #999;
 
	border-left: none;
 
	margin-bottom: -1px; /*--“empurra” o item da lista 1px para baixo--*/
 
	overflow: hidden;
 
	position: relative;
 
	background: #e0e0e0;
 
	}
 
	ul.tabs li a {
 
	text-decoration: none;
 
	color: #000;
 
	display: block;
 
	font-size: 1.2em;
 
	padding: 0 20px;
 
	border: 1px solid #fff; /*--deixa um efeito de relevo com uma borda branca de 1px dentro do item da lista--*/
 
	outline: none;
 
	}
 
	ul.tabs li a:hover {
 
	background: #ccc;
 
	}
 
	html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Faz a lista ativa nao obedecer as propriedades do hover--*/
 
	background: #fff;
 
	border-bottom: 1px solid #fff; /*--faz a aba ativa parecer conectada com seu conteudo--*/
 
	}
 
	.tab_container {
 
	border: 1px solid #999;
 
	border-top: none;
 
	overflow: hidden;
 
	clear: both;
 
	float: left; width: 100%;
 
	background: #fff;
 
	}
 
	.tab_content {
 
	padding: 20px;
 
	font-size: 1.2em;
 
	}

4. Quase pronto, mas ainda não vai funcionar, já que não criamos a função jquery. Vamos fazer isso. No arquivo tabs.html, antes da tag , coloque o seguinte código:

Show/Hidden jquery code

View source
<script>
 
	$(document).ready(function() {
 
 
 
	//quando a pagina carregar...
 
	$(".cont_tab").hide(); //esconde todo conteudo
 
	$("ul.tabs li:first").addClass("active").show(); //ativa a primeira aba
 
	$(".cont_tab:first").show(); //mostra o conteudo da primeira aba
 
 
 
	//ao clicar
 
	$("ul.tabs li").click(function() {
 
 
 
	$("ul.tabs li").removeClass("active"); //remove qualquer classe “active”
 
	$(this).addClass("active"); //Adiciona a classe “active” na aba selecionada
 
	$(".cont_tab").hide(); //esconde o conteudo de todas as abas
 
 
 
	var activeTab = $(this).find("a").attr("href"); //encontra o atributo href para identificar a aba ativa e seu conteudo
 
	$(activeTab).fadeIn(); //Mostra o conteudo da aba ativa gradualmente
 
	return false;
 
	});
 
 
 
	});
 
 
 
	</script>
 
 

Esta aí. Se você nunca usou o jquery, sugiro que leia a documentação no site oficial para maior compreensão deste tutorial. Qualquer dúvida ou sugestão, só falar.

Webtutoriais:8021BF02

   

Login