Abas
Organiza conteúdo em abas navegáveis, exibindo uma seção por vez. Ideal para agrupar conteúdo relacionado sem rolar a página, como opções alternativas, perfis diferentes ou versões.
Experimente
Estilos de Liderança
O líder toma as decisões sozinho, sem consultar o grupo, e espera que sejam seguidas sem questionamento. Funciona bem em situações de crise ou prazo curto, onde decisões rápidas importam mais que consenso, mas tende a reduzir a iniciativa e o engajamento da equipe a longo prazo.
Código-fonte
Dados de exemplo
Cada aba tem um título curto (o texto do botão) e um conteúdo — a ficha recomenda no máximo 5 abas e conteúdo de tamanho parecido entre elas, senão o formato cria expectativa inconsistente.
| 1 |
<?php
|
| 2 |
$titulo = 'Modelos de Trabalho';
|
| 3 |
$abas = [
|
| 4 |
['titulo' => 'Presencial', 'conteudo' => 'Toda a equipe atua no mesmo espaço físico, o que facilita a comunicação espontânea e o alinhamento rápido de decisões. Exige deslocamento diário e uma estrutura física para acomodar todos, mas fortalece vínculos e cultura organizacional pelo convívio direto.'],
|
| 5 |
['titulo' => 'Remoto', 'conteudo' => 'Cada pessoa trabalha de onde quiser, sem exigência de presença física num escritório. Reduz custos de deslocamento e amplia o alcance de contratação, mas depende de disciplina individual e de ferramentas de comunicação assíncrona bem estabelecidas.'],
|
| 6 |
['titulo' => 'Híbrido', 'conteudo' => 'Combina dias presenciais com dias remotos, geralmente definidos por acordo entre equipe e liderança. Busca equilibrar a flexibilidade do remoto com a colaboração presencial, mas exige coordenação de agenda para que os dias no escritório reúnam as pessoas certas.'],
|
| 7 |
];
|
| 8 |
?>
|
Cabeçalho
Só o título, centralizado — mesmo tratamento dos outros componentes de exibição do site.
| 1 |
<div class="abas">
|
| 2 |
<div class="cabecalho">
|
| 3 |
<p class="titulo"><?= htmlspecialchars($titulo) ?></p>
|
| 4 |
</div>
|
Botões de aba
Só o primeiro botão nasce com a classe "ativa" — o clique troca qual botão tem essa classe, nunca mais de um por vez.
| 1 |
<div class="botoes">
|
| 2 |
<?php foreach ($abas as $i => $aba): ?>
|
| 3 |
<button type="button" class="botao-aba<?= $i === 0 ? ' ativa' : '' ?>" data-alvo="painel-<?= $i ?>">
|
| 4 |
<?= htmlspecialchars($aba['titulo']) ?>
|
| 5 |
</button>
|
| 6 |
<?php endforeach; ?>
|
| 7 |
</div>
|
Painéis de conteúdo
Todos os painéis já existem no HTML desde o carregamento — só o primeiro nasce visível. É a mesma técnica do Carrossel e da Colagem: trocar de aba é só mover uma classe, nunca recriar conteúdo.
| 1 |
<?php foreach ($abas as $i => $aba): ?>
|
| 2 |
<div id="painel-<?= $i ?>" class="painel<?= $i === 0 ? ' ativo' : '' ?>">
|
| 3 |
<p><?= htmlspecialchars($aba['conteudo']) ?></p>
|
| 4 |
</div>
|
| 5 |
<?php endforeach; ?>
|
| 6 |
</div>
|
Cartão e cabeçalho
Cabeçalho como caixa de título própria, mesmo tratamento dos outros componentes de exibição do site.
| 1 |
.abas {
|
| 2 |
border: 1px solid #e2e8f0;
|
| 3 |
border-radius: 16px;
|
| 4 |
overflow: hidden;
|
| 5 |
font-family: inherit;
|
| 6 |
}
|
| 7 |
.cabecalho {
|
| 8 |
padding: 20px 24px;
|
| 9 |
text-align: center;
|
| 10 |
background: #f1f5f9;
|
| 11 |
border-bottom: 1px solid #cbd5e1;
|
| 12 |
}
|
| 13 |
.titulo {
|
| 14 |
margin: 0;
|
| 15 |
font-size: 18px;
|
| 16 |
font-weight: 700;
|
| 17 |
color: #0f172a;
|
| 18 |
}
|
Botão de aba
Uma única classe (.ativa) muda cor do texto E a cor da borda inferior juntas — é assim que o JS evita o erro mais comum aqui: trocar só metade do visual e deixar a aba com uma aparência de estado inconsistente (ex.: texto de aba ativa junto com borda de aba inativa).
| 1 |
.botoes {
|
| 2 |
display: flex;
|
| 3 |
border-bottom: 1px solid #cbd5e1;
|
| 4 |
overflow-x: auto;
|
| 5 |
}
|
| 6 |
.botao-aba {
|
| 7 |
flex-shrink: 0;
|
| 8 |
padding: 12px 20px;
|
| 9 |
border: none;
|
| 10 |
border-bottom: 2px solid transparent;
|
| 11 |
background: none;
|
| 12 |
font: inherit;
|
| 13 |
font-weight: 600;
|
| 14 |
font-size: 14px;
|
| 15 |
color: #64748b;
|
| 16 |
cursor: pointer;
|
| 17 |
white-space: nowrap;
|
| 18 |
}
|
| 19 |
.botao-aba:hover {
|
| 20 |
color: #334155;
|
| 21 |
}
|
| 22 |
.botao-aba.ativa {
|
| 23 |
border-bottom-color: #6366f1;
|
| 24 |
color: #4338ca;
|
| 25 |
}
|
| 26 |
.botao-aba.ativa:hover {
|
| 27 |
color: #4338ca;
|
| 28 |
}
|
Painel de conteúdo
display:none no painel escondido, não opacity — o texto das outras abas não deve ocupar espaço nem ser lido por leitor de tela enquanto a aba não está selecionada.
| 1 |
.painel {
|
| 2 |
display: none;
|
| 3 |
padding: 20px;
|
| 4 |
}
|
| 5 |
.painel.ativo {
|
| 6 |
display: block;
|
| 7 |
}
|
| 8 |
.painel p {
|
| 9 |
margin: 0;
|
| 10 |
font-size: 15px;
|
| 11 |
line-height: 1.6;
|
| 12 |
color: #475569;
|
| 13 |
}
|
Trocar de aba
Cada botão e cada painel usam uma única classe de estado ("ativa"/"ativo"), nunca classes de cor soltas. Remover essa classe de todos antes de adicionar no escolhido garante que nunca sobra mais de um estado "ativo" ao mesmo tempo — foi exatamente o oposto disso (remover só um pedaço da aparência antiga) que causava o bug real corrigido nesta sessão: a aba antiga ficava com a cor de "ativa" grudada, mesmo depois de perder a borda.
| 1 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2 |
var abas = document.querySelector('.abas');
|
| 3 |
var botoes = abas.querySelectorAll('.botao-aba');
|
| 4 |
var paineis = abas.querySelectorAll('.painel');
|
| 5 |
|
| 6 |
botoes.forEach(function (botao) {
|
| 7 |
botao.addEventListener('click', function () {
|
| 8 |
botoes.forEach(function (b) { b.classList.remove('ativa'); });
|
| 9 |
botao.classList.add('ativa');
|
| 10 |
|
| 11 |
paineis.forEach(function (p) { p.classList.remove('ativo'); });
|
| 12 |
document.getElementById(botao.dataset.alvo).classList.add('ativo');
|
| 13 |
});
|
| 14 |
});
|