Abas em JavaScript
Agora vamos implementar abas. Veja imediatamente o exemplo do que é necessário:
Estude também a marcação na qual vamos resolver a tarefa:
<div id="parent">
<div class="menu">
<a href="" class="active">aba 1</a>
<a href="">aba 2</a>
<a href="">aba 3</a>
</div>
<div class="tabs">
<div class="tab active">
texto da aba 1
</div>
<div class="tab">
texto da aba 2
</div>
<div class="tab">
texto da aba 3
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
Observe que o link ativo
e a aba ativa têm a classe active.
Discussão
Agora vamos discutir como resolver esta tarefa. Obviamente, precisamos relacionar de alguma forma os links com suas respectivas abas. Nesta lição do livro teórico, já analisamos as possíveis opções.
Neste caso, proponho relacionar os links e as abas simplesmente pela posição: o primeiro link abrirá a primeira aba, o segundo link - a segunda aba e assim por diante.
O algoritmo geral será assim: ao clicar no botão, devemos encontrar o link com a classe e remover essa classe dele. Da mesma forma, devemos encontrar a aba com essa classe e também remover essa classe dela.
Em seguida, devemos pegar o link que foi clicado e ativá-lo. Depois, devemos pegar a aba que tem o mesmo número que o nosso link - e também ativá-la.
Copie os códigos HTML e CSS fornecidos. Implemente as abas de acordo com o algoritmo descrito.
