Ayer por la noche estuve pensando que sería bueno postear con relación a los Video tutoriales de jQuery, así que para darles un poco de práctica me puse a crear un pequeño TAB con jQuery y CSS.
:
La estructura de nuestro TAB, de manera que utilizaremos listas de HTML. De forma que la primera lista es el encabezado de nuestro TAB.
<ul>
<li><a href="#">BLOGS</a></li>
<li><a href="#">webs</a></li>
<li><a href="#">contenido</a></li>
</ul>
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li>
</ul>
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
Resultado:
Dar Formato a nuestro Tab (CSS):
Ahora pasaremos a cambiarlo a formato TAB, añadiremos estilos en CSS. Agregaremos Selectores y DIVs a nuestro código XHTML.
<div id="contenedor">
<h1>jQuery Tab</h1>
<div id="tab_contenedor">
<ul class="titulos">
<li><a href="#" title="contenido_1" class="tab activo">BLOGS</a></li>
<li><a href="#" title="contenido_2" class="tab">webs</a></li>
<li><a href="#" title="contenido_3" class="tab">contenido</a></li>
</ul>
<div id="tab_contenido">
<div id="contenido_1" class="contenido">
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li></ul>
</div>
<div id="contenido_2" class="contenido">
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
</div>
<div id="contenido_3" class="contenido">
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</div>
</div>
¿Porqué he agrado etiquetas como contenedor, tab_contenedor,etc?.. aquí la respuesta ya en CSS.
<!--Color de la página, color de letra y tipo de letra-->
body{font-family:Arial, Helvetica, sans-serif; background: #023c4b; color:#FFFFFF;}
<!--Quitaremos el estilo a las Listas, para que dejen de tener esas bolitas a los lados jiji XD-->
ul,li{list-style:none;}<!--Contenedor de todo el sitio, le asignamos un tamaño al igual lo Centramos con margin:10px auto-->
#contenedor{width:600px; margin:10px auto;}
<!-- TabContenedor es donde se encontrara el TAP, no el Cuerpo si no el TODO, en cambio TabContenido es el contendor del Contenido mostrado por cada encabezado-->
#tab_contenedor{padding:8px 8px; width:300px; background:#097793; border:1px solid #000000;}
#tab_contenido{padding:5px; background:#FFFFFF; border:1px solid #04667f;}
<!--El Encabezado del TAB, se mostrara en Linea (display:inline)-->
ul.titulos{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.titulos li{display:inline;}
<!--Cada enlace del encabezado, se convertirá en Mayusculas, importante darle un Borde, para que se note que no esta activo, al igual que el Padding-->
ul.titulos li a{
color:#097793;
padding:5px 10px 6px 10px;
text-transform:uppercase;
border:1px solid #04667f;
background:#FFFFFF;}
<!--Aquí los Enlaces del Encabezado, lo que le da la gracia a que parezca TAB, es el border cambia a blanco en su parte de abajo, asi le da la perspectiva de que esta unido al contenido-->
ul.titulos li a:hover{border:1px solid #CCCCCC;}
ul.titulos li a.activo{color:#000000;
border-bottom: 1px solid #ffffff; background:#FFFFFF; }
a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}
<!--Un poco de estilo a las listas del contenido.-->
.contenido ul{margin:10px 0px; padding:0 11px;}
.contenido ul li{ margin-bottom:3px; font-size:15px;}
.contenido ul li a{color:#3f4c4f;}
.contenido ul li a:hover{color:#899fa5;}
<!--SUPER IMPORTANTE que el contenido_2 y 3 se encuentren en NO display, ya que con el jQuery, haremos que aparezcan al dar click sobre cada enlace relacionado.-->
#contenido_2, #contenido_3 { display:none; }
Resultado:
Por ultimo la programación (jQuery):
Si recuerdan, los métodos show y hide, era para mostrar y ocultar contenido, pues esos mismos utilizaremos para este TAB, se puede usar también el SlideUp/SlideDown, o si te gusta para FadeIn o FadeOut, como gustos, a mi me parecio una mejor opción tomar el Show/Hide. Recuerda que debes incluir la librería de jQuery!, por ejemplo (usando la nueva versión 1.2.6):
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
Código para generar los Tabs:
<script type="text/javascript">
// Cuando cargue el documento
$(document).ready(function(){
// Cuando el enlace del encabezao sea clickeado
$("a.tab").click(function () {
// Apaga el Activo
$(".activo").removeClass("activo");
// Cambia Activo
$(this).addClass("activo");
// Despliega, escondiendo
$(".contenido").hide('slow');
// Muestra el contenido, obteniendo del atributo title del enlace (p.e. contenido_1), y muestra con 'show' el contenido
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');
});
});
</script>
VER DEMO >>
Hoy por la tarde, en la asignatura de Diseño de Aplicaciones para Internet, expuse sobre "JavaScript Frameworks". Antes de hablar sobre los FrameWorks como tales, hable sobre la breve historia del javascript, sus inicios, el porque fue creado, por que su nombre, y el resurgimiento que le dio la tecnología AJAX a JavaScript. Lamentablemente, mucha información no fue agregada a las diapositivas, por cuestiones de tiempo, a manera de sintexis se dijo: 
