crear control tab con css

como crear control tab con css y html <_<

 

Bueno con CSS solo no se podría porque necesitas reacciones interactivas cuando el usuario da clic, y para realizar eso necesitas un lenguaje del lado del cliente, como es JavaScript, puedes intentarlo hacer así, con ocultar y mostrar diferentes DIVs de manera manual.

La otra forma es usar por ejemplo Control.Tabs, que esta basado en Prototype (AJAX) y permite eso:

<img src="http://ribosomatic.com/upload/ajax_tabs_5.gif" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />

<a href="http://livepipe.net/projects/control_tabs/" target="_blank">http://livepipe.net/projects/control_tabs/</a>

Existen varias mas, como:

<img src="http://ribosomatic.com/upload/ajax_tabs_1.gif" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />
<a href="http://actsasflinn.com/Ajax_Tabs/index.html" target="_blank">http://actsasflinn.com/Ajax_Tabs/index.html</a>

<img src="http://ribosomatic.com/upload/ajax_tabs_2.gif" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />
<a href="http://www.developersnippets.com/?p=22" target="_blank">http://www.developersnippets.com/?p=22</a>

<img src="http://ribosomatic.com/upload/ajax_tabs_6.gif" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />
<a href="http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/" target="_blank">http://stilbuero.de/2006/05/13/accessible-...bs-with-jquery/</a>

Y otras listadas acá:
<a href="http://www.ribosomatic.com/articulos/pestanas-o-tabs-con-ajax-css-y-javascript/" target="_blank">http://www.ribosomatic.com/articulos/pesta...s-y-javascript/</a>

Por último te dejo el <b>CSS Tab Designer</b>

<img src="http://www.highdots.com/static/css-list/images/multi-tabs.png" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" /> <img src="http://www.highdots.com/static/css-list/images/th_csstab2-1.png" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" /> <img src="http://www.highdots.com/static/css-list/images/th_csstab2-2.png" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />

<a href="http://www.highdots.com/css-tab-designer/" target="_blank">http://www.highdots.com/css-tab-designer/</a>

que te permite generar visualmente y de manera sencilla diferentes tipos de Tabs.

 

probe el css tab designer y su uso es facil pero para mostrar un contenido diferente en cada pestaña carga nuevamente la pagina.No se si este usando el codigo correctamente de ser asi espero la respuesta.

Tambien cheke el control.tabs <a href="http://livepipe.net/projects/control_tabs/" target="_blank">http://livepipe.net/projects/control_tabs/</a> y no necesita cargar cada vez que se seleciona un tab solo he visto los ejemplos que se muestran en la pagina, intente hacerlo pero no entiendo mucho por que la pagina esta en ingles y no se como usar el codigo alguien que haya probado contol.tabs podira explicar como manejar el codigo ya que en la pagina te muestra los sigtes 3 codigos a modo de ejemplo y la descarga de la libreria.
Mejor me pongo a estudiar ingles para ver como utilizarlo <_<

<ul id="tab_group_one">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
<div id="one"><p>I am the content for tab one.</p></div>
<div id="two"><p>I am the content for tab two.</p></div>
<script>
new Control.Tabs('tab_group_one');
</script>

document.getElementsByClassName('tabs').each(function(tab_group){
new Control.Tabs(tab_group);
});

<script>document.write('<style>#api, #resources { display:none; }</style>');</script>

 

No necesitas saber ingles, necesitas saber HTML, CSS y JavaScript, y para hacer cosas mas complejas todo el combo AJAX.

El tema de estas cosas es sencillo, pero son cosas que requieren no temerle a los códigos, de otra forma no podrás usarlas o personalizarlas.

 

Wenas, quique, hay algun sitio para encontrar más tipos de tabs para el css-tab-designer?? porq por lo q veo en el programa no puedes crearte un tipo nuevo no?

saludos y feliz año a todos

 

Si quieres hacer personalizaciones es sencillo hacer el tuyo propio sabiendo AJAX.

 

En la red encontre este pequeño codigo en javascript que oculta y muestra tablas el cual se asemeja a
un controltab, pero no lo entiendo mucho en fin, quiero modificar la funcion, para que al cargar la pagina
me muestre una de las 3 tablas ocultas, lo intente quitandole el style="display:none" a la tabla que quiero
que se muestre al cargar la pagina pero al precionar el link para visualizar otra tabla este ya no desaparece

otra duda que tengo es, al momento de cargar la pagina, esta solo carga lo que esta visible o carga todo
incluyendo las tablas que se encuentran ocultas aqui dejo el codigo javascript

var obj=null;
function viewHide(id)
{
var targetId, srcElement, targetElement;
var targetElement = document.getElementById(id);
if (obj!=null)
obj.style.display='none';
obj=targetElement;
targetElement.style.display = "";
}
descarga el ejemplo completo