Cmacias.com

Ahora que están de moda los sistemas de pestañas, yo también me subo al carro de la moda y propongo mi propio sistema al margen de frameworks. Un poco de html, algo de css y el javascript de toda la vida.

Lo primero de todo es crear la estructura que queremos que siga el sistema. En mi caso quiero hacer un panel limitado en tamaño, para pongamos por ejemplo, un panel de configuración.

<div id="panel">
   <ul id="tabs">
      <li id="tab_01"><a href="#">opción 1</a></li>
      <li id="tab_02"><a href="#">opción 2</a></li>
      <li id="tab_03"><a href="#">opción 3</a></li>
      <li id="tab_04"><a href="#">opción 4</a></li>
   </ul>
   <div id="paneles">
      <div id="panel_01">panel para la opción 1</div>
      <div id="panel_02">panel para la opción 2</div>
      <div id="panel_03">panel para la opción 3</div>
      <div id="panel_04">panel para la opción 4</div>
   </div>
</div>

A cada elemento de la lista de los paneles les añadimos un identificador para después poder ocultarlos y/o mostrarlos según nos convenga. De momento debería de verse así

A continuación viene la parte más divertida, darle forma y color.
Para la forma de las pestañas, usaremos la siguiente imagen:

Los estilos serían algo similar a esto.

/* tamaño y forma del panel principal */
div#panel {
   position: relative;
   width:400px;
   height: 300px;
}

/* configuracion de las pestañas */
   ul#tabs {
      position:absolute;
      left: 0px;
      top: 0px;
      margin:0;
      padding:0;
      width: 400px;
      height: 24px;
      z-index: 20;
   }
      ul#tabs li {
         float:left;
         height: 23px;
         padding-left: 8px;
         list-style: none;
         margin-right: 1px;
         background: url(tabs.png) left -48px;
      }
      ul#tabs li.actual {
         height: 24px;
         background: url(tabs.png) left -72px;
      }
         ul#tabs li a {
            display: block;
               /* hack para ie6 */
               .display: inline-block;
               /* fin del hack */
            height: 23px;
            line-height: 23px;
            padding-right: 8px;
            outline: 0px none;
            font-family: arial;
            font-size: 10px;
            text-decoration: none;
            color: #000;
            background: url(tabs.png) right 0px;
         }

         ul#tabs li.actual a {
            height: 24px;
            line-height: 24px;
            background: url(tabs.png) right -24px;
            cursor: default;
         }

   /* Configuración de los paneles */
   div#panel #paneles {
      position:absolute;
      left: 0px;
      top: 23px;
      width: 398px;
      height: 275px;
      border: 1px solid #91a7b4;
      background: #fff;
      overflow: hidden;
      z-index: 10px;
   }
      div#panel #paneles div {
         margin:10px;
         width: 378px;
         height: 255px;
         font-family: arial;
         font-size: 12px;
         text-decoration: none;
         color: #000;
         overflow: auto;
   }

Por lo que el resultado debería ser igual a esto.

Como la cosa ya va tomando forma, necesitamos crear una función javascript que nos permita cambiar tanto la apariencia de las pestañas como la visibilida de cada una de las capas destinadas a tal fin.

Para ello creamos una función como esta

function tab(pestana,panel)
{
   pst = document.getElementById(pestana);
   pnl = document.getElementById(panel);
   psts = document.getElementById('tabs').getElementsByTagName('li');
   pnls = document.getElementById('paneles').getElementsByTagName('div');

   // eliminamos las clases de las pestañas
   for(i=0; i< psts.length; i++)
   {
   // Para evitar meternos en temas de dom
   // hacemos que la clase sea vacío
      psts[i].className = ”;
   }

   // Añadimos la clase “actual” a la pestaña activa
   pst.className = ‘actual’;

   // ocultamos todos los paneles
   for(i=0; i< pnls.length; i++)
   {
      pnls[i].style.display = ‘none’;
   }

   // Y mostramos el panel que nos interesa
   pnl.style.display = ‘block’;
}

Al final de nuestro documento, mostramos la pestaña que queremos tener activa de esta forma

   <script type="text/javascript">
      tab('tab_01','panel_01');
   </script>

Y esta misma función será la que utilicemos en cada enlace para poder mostrar/ocultar nuestra información.

<ul id="tabs">
   <li id="tab_01"><a href="#" onclick="tab('tab_01','panel_01');">opción 1</a></li>
   <li id="tab_02"><a href="#" onclick="tab('tab_02','panel_02');">opción 2</a></li>
   <li id="tab_03"><a href="#" onclick="tab('tab_03','panel_03');">opción 3</a></li>
   <li id="tab_04"><a href="#" onclick="tab('tab_04','panel_04');">opción 4</a></li>
</ul>

[ ver resultado final ] [ descargar ]