Pregunta

¿Cómo implementar navegación por pestañas usando Prototype?

Responder esta pregunta por dudin el 2009-09-25

Tengo varios paneles de información que se activan mediante una navegación por pestañas, por lo que necesito activar cada panel cuando se haga click en la pestaña correspondiente (Ya tengo el CSS), preferentemente utilizando la librería Prototype pues es la que utilizo en el proyecto:

    <ul id="tabs">
       <li><a  href="#tab1">Actividad</a></li>
       <li><a  href="#tab2">Información</a></li>
    </ul>
   </div>
   <div  id="tab1">  
     <h2>Actividad</h2>
	 <p>Aquí el contenido del tab1.....</p>
   </div>
   <div  id="tab2">
      <h2>Información</h2>
	 <p>Aquí el contenido del tab2.....</p>
   </div>

[reportar pregunta]

Respuestas

Una manera de lograrlo es haciendo uso de la clase Fabtabs basada en Prototype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<link rel="stylesheet" href="tabs.css" type="text/css" media="all">
	</head>
	<body>
    <ul id="tabs">
       <li><a  href="#tab1">Actividad</a></li>
       <li><a  href="#tab2">Información</a></li>
    </ul>
   </div>
   <div class="panel"  id="tab1">  
     <h2>Actividad</h2>
	 <p>Aquí el contenido del tab1.....</p>
   </div>
   <div  class="panel"  id="tab2">
      <h2>Información</h2>
	 <p>Aquí el contenido del tab2.....</p>
   </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", function(){ new Fabtabs('tabs', {hover:false}); });
</script>
	</body>
</html>