PEGAR POSIÇÃO DO ELEMENTO FILHO COM MÉTODO INDEX() JQUERY

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.

• Aba 1
• Aba 2
• Aba 3

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!