[TUTORIAL] Exibição de conteúdo por abas

Código:

<style>div.aba {
   background:#fff;
   text-align:justify;
   margin-bottom:20px;
   padding:10px 15px;
   border:1px solid #CcC;
   box-shadow:inset 1px 1px 2px #999;
   border-radius:4px;
   }
#navebar {
   font:bold 12px Georgia, "Times New Roman", Times, serif;
   margin:0;
   padding:3px 0;

   }
#navebar li {
   list-style:none;
   margin-right:6px;
   display:inline;
   }
#navebar li a {
   padding:3px 6px;
   border:1px solid #09F;
   border-bottom:none;
   background:#dde;
   color:#333;
   text-decoration:none;
   }
#navebar li a:hover {
   color:#000;
   background:#aae;
   border-color:#09F;
   }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
       color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
   width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
   display:inline-block;
    transition: background-color 0.5s;
   }
    #navebar li a:hover {    background-color: #22D5E7;}</style>


<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar"> <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>