Olá Pessoal. Hoje vou apresentar um pequeno tutorial de criação de abas utilizando apenas HTML e CSS. O objetivo é trazer um exemplo simples que pode ser usado em projetos já existentes. Para este exemplo, nós vamos ter uma simples estrutura de abas em HTML e usando a propriedade de listas com a tag <ul> e 3 <li>.
1. Criando a estrutura HTML.
Primeiramente, temos o seguinte código HTML:
<!-- Criando a listagem -->
<ul class="abas">
<!-- Aqui, criação da primeira aba -->
<li class="aba" id="aba-1">
<a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
<li class="aba" id="aba-2">
<a href="#aba-2">Aba 2</a>
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
<li class="aba" id="aba-3">
<a href="#aba-3">Aba 3</a>
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
No bloco de código anterior, criamos uma lista com a tag <ul> com 3 opções, intituladas “Aba 1”, “Aba 2” e “Aba 3”. Repare que definimos classas para a <ul>. Para os itens da lista <li> além de classes, definimos um ID para cada um, que servirá para linkar as abas. Para os links, utilizando a técnica de âncoras (#nome-da-aba) sendo o mesmo ID de cada item da lista de abas.
2. Definindo o Estilo CSS
Após a criação da estrutura em HTML, precisamos definis as classes através do CSS. Criaremos portanto as seguintes classes:
.abas {
position: relative;
}
.aba {
display: inline;
}
.aba &amp;amp;gt; a {
float: left;
padding: 0.5em 1em;
background: linear-gradient(#FFF, #EEE);
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.aba:not(:target) a {
border-bottom: 0 none;
}
.aba:target a, a:hover {
background: white;
}
.conteudo {
position: absolute;
left: 0;
top: calc(2em + 4px); /* altura do link + bordas */
z-index: -2;
border: 1px solid #CCC;
background-color: white;
}
.aba:target .conteudo {
z-index: -1;
}
Repare que definimos apenas classes. Os IDs que usamos no código HTML serviram apenas para utilizarmos as âncoras para serem o link de cada aba. Pronto, de forma simples temos o resultado final. A título de exemplo, criei uma pagina simples em HTML incorporando o CSS dentro da mesma. Vale lembrar que é aconselhável criar um arquivo CSS à parte em seu projeto, e adicionar o trecho de código HTML onde você precisar dentro da sua página web.
O código completo ficaria assim:
<!DOCTYPE html>
<html>
<head>
<title>
Criando Abas
</title>
<meta charset="UTF-8" />
<style type="text/css">
.abas {
position: relative;
}
.aba {
display: inline;
}
.aba > a {
float: left;
padding: 0.5em 1em;
background: linear-gradient(#FFF, #EEE);
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.aba:not(:target) a {
border-bottom: 0 none;
}
.aba:target a, a:hover {
background: white;
}
.conteudo {
position: absolute;
left: 0;
top: calc(2em + 4px); /* altura do link + bordas */
z-index: -2;
border: 1px solid #CCC;
background-color: white;
}
.aba:target .conteudo {
z-index: -1;
}
</style>
</head>
<body>
<!-- Criando a listagem -->
<ul class="abas">
<!-- Aqui, criação da primeira aba -->
<li class="aba" id="aba-1">
<a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
<li class="aba" id="aba-2">
<a href="#aba-2">Aba 2</a>
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
<li class="aba" id="aba-3">
<a href="#aba-3">Aba 3</a>
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
</body>
</html>
O código-fonte completo você pode acessar pelo meu Github clicando aqui.
Espero ter ajudado você, até a próxima.
Blog prof. Daniel Brandão - Tecnologia + Programação + Dados 
Boa tarde amigo, só um toque para vc, se quiser deixa seus codigos fontes mais bonitos, use as marcações:
O language, pode ser alterado para java, javascript, css, groovy,…
[]’s
CurtirCurtir
Ops… não sabia que no comentário também funcionava.
CurtirCurtir
Última tentativa:
[ code language=”html” ]
your code here
[ /code ]
CurtirCurtir
Professor, acho que ficou meio bugado esse código ai.
CurtirCurtir
É verdade Édrick, tive que atualizar o post e quando faço isso esqueci que ele “buga” as tags HTML. Mas já alterei novamente, obrigado pela observação.
CurtirCurtir
Boa noite
Quero contratar um profissional para criar um sistema de abas personalizado para meu site, alguém pode indicar..
CurtirCurtido por 1 pessoa
Olá, acho que posso ajudá-lo(a). Me mande por e-mail qual sua necessidade. falecom@danielbrandao.com.br
Aguardo seu contato.
CurtirCurtir
Muito boa explicação.
Obrigado.
CurtirCurtido por 1 pessoa
Ola Daniel, excelente explicação e exemplo, tenho apenas 1 duvida, como posso fazer para a pagina carregar inicialmente com o conteudo de 1 Tab ja selecionado ??
CurtirCurtir
Bom dia.. preciso clicar uma página que será em cada aba o mês do ano… e ao clicar na aba preciso gerar dados referente ao periodo daquele mês..como faço para colocar esse valor de periodo em cada aba?
Aguardo retorno
obrigada
Daniela
CurtirCurtir
Oi, Dani. Você precisará usar alguma linguagem dinâmica (como JavaScript com Ajax ou algum framework moderno como React). Pode também puxar os dados com uma linguagem back-end (ex: Java, Python, PHP etc).
CurtirCurtir