Contenido Tabular Con jQuery

EL SCRIPT
Como de costumbre añadimos la librería de jQuery a nuestra pagina y el script correspondiente para que las pestañas funcionen
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--AÑADIMOS LA LIBRERIA DE jQUERY SI NO LO HEMOS HECHO YA -->
<script type="text/javascript">
        $(document).ready(function() {
            $(".tab_content").hide();
            $("ul.tabs li:first").addClass("active").show();
            $(".tab_content:first").show();
            $("ul.tabs li").click(function()
               {
                $("ul.tabs li").removeClass("active");
                $(this).addClass("active");
                $(".tab_content").hide();

                var activeTab = $(this).find("a").attr("href");
                $(activeTab).fadeIn();
                return false;
            });
});
</script> 

EL HTML
Este el codigo HTML que tendremos que añadir en la parte de nuestra web en la que queramos que aparezca el contenido tabular.
<ul class="tabs">
    <li><a href="#tab1">Pestaña 1</a></li>
    <li><a href="#tab2">Pestaña 2</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
ESTE ES EL CONTENIDO DE LA PRIMERA PESTAÑA
</div>
<div id="tab2" class="tab_content">
TU VALENTIA POR HACER CLICK HA SIDO RECOMPENSADA CON EL CONTENIDO DE LA SEGUNDA PESTAÑA
</div>
</div>

EL CSS
Este es el CSS para dejarlas como aparecen aquí en Bitt Net. (Perdón por ponerlo así, pero es tal cual lo tenia yo en mis hojas de estilo)
/* TABS */ 
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; width: 100%; } 
ul.tabs li { float: left; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-bottom: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #f2f2f2; /* Old browsers */ background: -moz-linear-gradient(top, #f2f2f2 0%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2f2f2 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2f2f2 0%,#cccccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2f2f2 0%,#cccccc 100%); /* IE10+ */ background: linear-gradient(to bottom, #f2f2f2 0%,#cccccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ border-radius: 3px 3px 0 0; margin: 0 5px 0 0; } 
ul.tabs li a { text-decoration: none; color: #000; text-shadow: 1px 1px 0 #FFF; display: block; font-size: 13px; padding: 0 10px; border: 1px solid #F2F2F2; outline: none; } 
ul.tabs li:not(.active) a:hover { background: #f2f2f2; /* Old browsers */ background: -moz-linear-gradient(top, #f2f2f2 0%, #e7eacc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e7eacc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2f2f2 0%,#e7eacc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2f2f2 0%,#e7eacc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2f2f2 0%,#e7eacc 100%); /* IE10+ */ background: linear-gradient(to bottom, #f2f2f2 0%,#e7eacc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e7eacc',GradientType=0 ); /* IE6-9 */ } 
html ul.tabs li.active { background: #cccccc; /* Old browsers */ background: -moz-linear-gradient(top, #cccccc 0%, #f7f7f7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* IE10+ */ background: linear-gradient(to bottom, #cccccc 0%,#f7f7f7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */ border-bottom: 1px solid #f7f7f7; } 
html ul.tabs li.active a:hover { background: #cccccc; /* Old browsers */ background: -moz-linear-gradient(top, #cccccc 0%, #f7f7f7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cccccc 0%,#f7f7f7 100%); /* IE10+ */ background: linear-gradient(to bottom, #cccccc 0%,#f7f7f7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */ } 
.tab_container { border: 1px solid #B1B1B1; border-radius: 0 3px 3px 3px; overflow: hidden; clear: both; float: left; width: 100%; background: #f7f7f7; } 
.tab_content { padding: 10px 5px; font-size: 11px; }

Ejemplo

Pestaña 1
Pestaña 2

ESTE ES EL CONTENIDO DE LA PRIMERA PESTAÑA

TU VALENTIA POR HACER CLICK HA SIDO RECOMPENSADA CON EL CONTENIDO DE LA SEGUNDA PESTAÑA

P U B L I

Navegación

Bitt Net En Las Redes

Bitt Net

Contenido Tabular Con jQuery

EL SCRIPT

EL HTML

EL CSS

Ejemplo