Crear una navegaciÃ³n por pestaÃ±as con AJAX y CSS. Primera Parte

06/11/2006 -

En esta primera parte se va a crear la arquitectura en CSS y HTML que permitirÃ¡ cargar los distintos contenidos en una navegaciÃ³n por pestaÃ±as o tabs. Para crear una barra de navegaciÃ³n, se puede usar una lista a la que se quitan las viÃ±etas y se cuyos elementos se disponen de modo horizontal gracias a "display:inline". Para dar el aspecto de botones se les asigna un borde y un fondo que cambian cuando se pasa el raton sobre ellos (:hover). TambiÃ©n he dispuesto de un contenedor "ContTabul" que serÃ¡ donde se irÃ¡n cargando los distintos contenidos.Creo que el CSS es bastante claro y, en el caso de que no lo sea, uno siempre puede recurrir a mÃºltiples tutoriales en internet que se enseÃ±an como crear estas pestaÃ±as con CSS.

QuizÃ¡ la unica peculiaridad es la creaciÃ³n de dos clases ("inactivo" y "activo"), que utilizarÃ© y permutarÃ© entre ellas con Ajax para mostrar en cada momento cuÃ¡l es la pestaÃ±a activa. Pero eso lo veremos en la segunda parte del tutorial.

El cÃ³digo para crear una simple navegaciÃ³n por pestaÃ±as serÃa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX TABS</title>
<style type="text/css">
body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      background-color: #FFFFFF;
      margin-left: 100px;
      margin-right: 100px;
}
#ContTabul {
      border-left: 1px solid #CCC;
      border-right: 1px solid #CCC;
      border-bottom: 1px solid #CCC;
      padding: 10px 5px 6px 5px;
}
ul#tabnav {
      list-style-type: none;
      margin: 0;
      padding-left: 40px;
      padding-bottom: 24px;
      border-bottom: 1px solid #CCC;
      font: 11px verdana, arial, sans-serif;
}
ul#tabnav li {
      float: left;
      height: 21px;
      background-color: #E4E4E4;
      color: #666;
      margin: 2px 10px 0 2px;
      border: 1px solid #CCC;
}
ul#tabnav a:link, ul#tabnav a:visited {
      display: block;
      color: #666;
      text-decoration: none;
      padding: 4px;
}
ul#tabnav a:hover {
      background-color: #CCC;
      color: #666;
}
#tabnav .activo {
      border-bottom: 1px solid #fff;
      color: #000000;
      background-color: #FFFFFF;
}
#tabnav .inactivo {}
</style>
</head>
<body>
<ul id="tabnav">
<li class="activo"><a href="#">Apartado 1</a></li>
<li class="inactivo"><a href="#">Apartado 2</a></li>
<li class="inactivo"><a href="#">Apartado 3</a></li>
<li class="inactivo"><a href="#">Apartado 4</a></li>
</ul>
<div id="ContTabul">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar vitae, nibh. </p>
</div>
</body>
</html>