El plugin DonnieTabs, a cargo del menda, está disponible con licencia MIT en GitHub para que lo utilicéis, modifiquéis y forkeéis a vuestro gusto.
Su uso es simple:
Añades en tu web la librería jQuery, el archivo .js de DonnieTabs y el archivo CSS (y si necesitas el CSS extra para IE también viene).
Luego para crear las pestañas y el contenido simplemente tenéis que usar unas clases y nomenclatura concretos en el marcado HTML y punto:
<!-- Para las pestañas una lista y dentro cada elemento así--> <ul class="simpletabs"> <li> <a href="#tab1">Tab1</a> </li> <li> <a href="#tab2">Tab2</a> </li> <li> <a href="#tab3">Third tab</a> </li> </ul> <!-- La lista debe ser la clase SimpleTabs, y la referencia del enlace debe ser al Id de la pestaña de contenido-->
Con eso tenéis las pestañas de navegación, la parte del contenido irá así:
<!-- Todo el contenido irá dentro un div de la clase tab_container --> <div class="tab_container"> <!-- Y dentro, el contenido va en divs de la clase tab_content--> <div id="tab1" class="tab_content"> <h3>titulo</h3> <p>Contenido</p> </div> <div id="tab2" class="tab_content"> <h3>titulo</h3> <p>Contenido</p> </div> <div id="tab3" class="tab_content"> <h3>titulo</h3> <p>Contenido</p> </div> </div>
Con esto ya tenéis vuestra página con navegación por pestañas. Podéis aportar todo lo que queráis a este proyecto. Yo intentaré meterle más cosas, por ahora es algo muy básico y ya tengo alguna idea.
esta muy bueno pero estara mejor mas detallado
Si me comentas tus dudas sería una gran ayuda para así poder documentar mejor. Hice una entrada en la Wiki del proyecto en GitHub, pero está en inglés. Agradezco sugerencias y consejos.