Criando abas (tabs) simples com jQuery

Precisando criar umas abinhas em seu site? Há muitos scripts na internet para isso, contudo, este é especial por ser muito simples e relativamente fácil de entender. Você poderá assim modificá-lo sem sofrimento para atender suas necessidades.

Apresentando o HTML utilizado no exemplo
<div id="caixa">
 <!—- Abas -–>
 <p id="abas">
  <a href="#aba1" class="selected">Aba 1</a>
  <a href="#aba2">Aba 2</a>
  <a href="#aba3">Aba 3</a
 </p>

<!-- Conteúdo das abas –>
<ul id="conteudos">
  <!-- Aba 1 –->
  <li id="aba1">
   <h2>Demonstração de texto1</h2>
   <p>Lorem ipsum dolor sit amet</p>
  </li>

  <!-- Aba 2 –>
  <li id="aba2">
   <h2>Conteúdo da aba #2</h2>
   <img src="https://wowppr.com/719-thumb.jpg" width="750" height="480"border="0" />
  </li>

  <!-- Aba 3 –>
  <li id="aba3">
   <h2>Trololooooooo</h2>
   <iframe width="756" height="480"src="https://www.youtube.com/embed/v1PBptSDIh8" frameborder="0" allowfullscreen></iframe>
  </li>
</ul>
</div>


CSS, pra embelezar suas abas…

div#caixa{
display: inline-block;
width: 800px;
height: 600px;
}

div#caixa p#abas{
display: inline-block;
width: 790px;
height: 40px;
margin: 0 10px 0 10px;
padding: 0;
overflow: hidden;
vertical-align: bottom;
}

div#caixa p#abas a{
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #666;
text-decoration: none;
padding: 12px 26px 12px 26px;
margin: 0 5px 0 0;
background-color: #f0f0f0;
}

div#caixa p#abas a:hover{
background-color: #999;
color: white;
}

div#caixa p#abas a.selected{
background-color: #ffcc00;
color: #000;
}

div#caixa ul#conteudos{
display: inline-block;
width: 798px;
height: 558px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
}

div#caixa ul#conteudos li{
display: inline-block;
width: 758px;
height: 528px;
margin: 10px 20px 10px 20px;
padding: 0;
overflow: auto;
}

E agora, a função jQuery

<script>
/* Função que carrega script das abas */
 $.abasSimples = function (){
  /* Guarda IDs dos elementos */
  var abas = 'p#abas';
  var conteudos = 'ul#conteudos';
  /* Oculta todas as abas */
  $(conteudos + ' li').hide();
  /* Exibe a primeira aba */
  $(conteudos + ' li:first-child').show();
  /* Quando uma aba for clicada */
  $(abas + ' a').click(function(){
   /* Remove todas as classes de todas as abas */
   $(abas + ' a').removeClass('selected');
   /* Acrescenta uma classe CSS marcando visualmente a aba como selecionada */
   $(this).addClass('selected');
   /* Oculta todas as abas abertas */
   $(conteudos + ' li').hide();
   /* Exibe a aba que foi clicada */
   $(conteudos +  ' ' + $(this).attr('href')).show();
   /* Fim :D */
   return false;
  });
};
</script>

Pronto!!!