Precisei criar 3 abas que ao clicar em uma aba, exibi um conteúdo ligado ao título da aba clicada e da um hide nos demais conteúdos, ao clicar na segunda aba, exibe o conteúdo ligado a segunda aba e da hide na que tava aberta, e assim sucessivamente. Para saber qual conteúdo exibir quando clicava na aba, precisei pegar a posição da aba clicada que era igual a posição do conteúdo desta aba clicada.
Então conheci o método index() do jquery, que pega a posição do elemento filho de um determinado elemento pai.
Veja o código e o exemplo prático para entender melhor.
No HTML:
<ul class="aba">
<li style="cursor:pointer;">Aba 1</li>
<li style="cursor:pointer">Aba 2</li>
<li style="cursor:pointer">Aba 3</li>
</ul>
<div class="conteudo">
<div style="display: none;"><b>Exibir Conteúdo da Aba 1</b></div>
<div style="display: none;"><b>Exibir Conteúdo da Aba 2</b></div>
<div style="display: none;"><b>Exibir Conteúdo da Aba 3</b></div>
</div>
NO JAVASCRIPT:
$("ul.aba li").click(function(){
var index = $(this).index();
$("ul.aba li").css("color","black")
$(this).css("color","blue")
$("div.conteudo").children().hide()
$("div.conteudo").children().eq(index).show()
})
Veja o exemplo na prático abaixo clicando nas abas para que aparece o seu conteúdo.
Aqui Exibi o conteúdo da Aba 1, que foi a que você clicou.
Agora está exibindo o conteúdo da Aba 2
A aba 3 foi clicada, então aqui é exibido o conteúdo da Aba 3
Se este conteúdo te ajudou ou está com dúvida em algo relacionado a este assunto, por favor deixe seu comentário. Forte abraço!
segunda-feira, 9 de março de 2020