¿Como hacer tabs con botones con HTML?

Pues, con css no se puede, css solo dan estilo para nada ofrecen algo distinto. Con html tampoco puedes hacerlo, así que la única manera de hacerlo es con javascript. Yo no se mucho de html ni de javascript, pero lo primero que se me viene a la mente es que tengas varios contenidos dentro de etiquetas div, cada div simula una pestaña de tab, cuando presiones un boton, hace la propiedad visible de ese div false y hace otro div visible, y asi juegas con ellos dependiendo el boton que presiones.

Lo que si es que html 5 lo desconozco por completo, tengo entendido que es mucho más fácil crear aplicaciones que parescan de escritorio que su antecesor html 4, asi que, ya depende de ti.

Sobres

Estaba pensando que debería de haber una forma de modificar la apariencia del botón :-S

mmmhhh :-?

pesando...

La cuestión acá es que el contenido está de hecho en paginas diferentes ( no son tabs como tal ) entonces, cuando el usuario "cambia" de tab, en realidad está haciendo submit a otra pagina..

Bueno si alguien tiene otra idea me avisa

:D :D : D

Pues si es más o menos como lo expones en tus imágenes .....

Tienes tus botones:

Podrías meter los botones en una tabla.

Con CSS me imagino que se puede quitar las orillas de los botones, y darles un color uniforme, para que parezca que sólo existen las celdas, además de dar estilo también a la tabla, para que no tenga aspecto de tabla.

Ya después, sólo restaría, igual con CSS y JS, pues cambiar el aspecto de la "pestaña" que elijas, cuando le des click....
Bueno, es una sugerencia.

// EDIT: No sé porque carajos se ve mi "tabla" toda desalineada >:-( , pero espero que se entienda la idea.
//EDIT 2: Cambié el texto por imágenes, espero que se puedan ver.

Pues creo que la fuente de información no cambia el concepto en si, que quieres mostrarla utilizando pestañas. Yo no quito el dedo del renglon jeje, tienes varias etiquetas div, con javascript cuando presionas un boton, haces un request a esa otra página, formateas las cadena y dejas el contenido del puro body, lo metes dinamicamente todo dentro de la etiqueta div y luego la haces visible. Algo asi como si tuvieras varios jpanels (divs), cuando presionas un boton (pestaña de un tab) vas y buscas otro panel, y luego ese otro panel lo metes al panel (div) indicado, lo haces visible y los demas invisbles y repintas la pantalla.

Aunque creo que es muy complicado por que estarias metiendo una pagina que no sabrias que contenido tiene, si tiene dependencias a css o js externos, y si se vaya a visualizar correctamente. Se me ocurre tambien que pudieras tener frames embedidos, pero creo que esos no se puede ocultar... hmmm no pos ta dificil.

sobres

Pues de menos mete jQuery, ya que hacer lo que necesitas es 'ajax' y para manejar los eventos y las cargas dinámicas de contenido pues puedes ayudarte en estas herramienta. Quizas no necesites tanto para unos tabs pero para mi gusto jQuery no es nada pesado y si es robusto de tal forma que hasta puedes meter una que otra monería extra (como plus si quieres verlo así) o simplemente dejar la plataforma lista para mejoras futuras.

a ver echale un lente a esto, por si te animas:

Gracias por las respuestas.

Lo que pretendo es usar botones pero ( input type submit o button o como se llamen :P ) y los ejemplos que veo ahí son con otras cosas....

Pero eso tiene una razón, la apariencia de los botones no se puede modificar ( hasta donde he encontrado ) como se puede con Java :P

Reviso los links y cuando encuentre la solución la pongo acá.

Gracias

Cómo que no se puede modificar la apariencia de los botones????

Aquí te dejo una página que hace precisamente eso, en base a CSS, sólo tienes que modificar el botón a tu gusto, y después dar click en la pestaña "code" (jo, irónico, la solución de tu simulación de pestañas, en una pestaña, jajajajaj entienden? pestaña, solución en una pestaña.... no? ash ya pues) y ya te muestra el css correspondiente.

Ehhh esto es justo lo que necesito ( creo ) ...

Digamos que fue un comentario ... mmmhh "provocador" de mi parte para motivar una respuesta como esta ( ¬¬ seeh )

:)

Gracias por el link y lo voy a revisar y les cuento

Gracias.

Chécate jQuery Tools, veo que ya has resuelto pero esto me fascina a mi cuando hago tabs, tira de jQuery, pero al final quedan bien cool.

Muy cerca de lo que necesito:

Voy a ver tambien ese con jQuery, el inconveniente que tendría es que no son botones, sino links y necesito que sean botones por la funcionalidad que ya trae el "click", aunque sé que se podría simular con una función javascript.

pues de hecho puedes meterle el evento   a un elemento HTML

 
y así le das el comportamiento de botón, de hecho algo similar se hacia cuando se pusieron de moda los botones estilizados que no eran mas que imágenes con evento rollover

Ajá.. lo que ví es algo como:

O algo así, pero quiero evitar llegar hasta ese punto básicamente ( y aunque suene raro ) porque no estoy muy seguro de poder tener el id del botón..

o.O

Si, es raro, lo sé

:D

Revisa el codigo de las dos paginas que te dieron, independientemente del mecanismo para cambiar de tab y la funcion que utilizes para llenar el contenido de cada tab, en ambos casos estan utilizando etiquetas div, que simplemente muestran u ocultan dependiendo el tab.

jeje solo queria puntualizarlo

sobrees

que tal OscarRyz, ahi esta un ejemplo de como simular botones con css y un poco de javascript para realizar la accion:

Esto codigo va en la hoja html, y las etiquetas serian "<<" "<" ">" ">>", es para manejar un catalogo
 
Considera esto para implementarlo:
- Como puedes ver hay 4 funciones de javascript en el codigo html, las puedes implementar como tu quieras.
- A traves de CSS puedes poner imagenes en cada uno de los "botones"
- Con link, visited, hover, o active podrias implementar la simulacion de los tabs, en el caso que te muestro, uso hover para cuando el cursosr del mouse esta encima del boton.

este seria el css

Eso la verdad está muy feo, yo preferiría algo como:
 

Y con CSS puedes darle un efectito de botón al link:
 

Y ya es más "natural".

wishmaster77 tengo preguntas:

Manejarias un id por cada link?
Por cada id seria una funcion?
Si fuera un solo id, como distinguirias que funcion debe de ejecutarse?

El manejo del id único por elemento es una buena práctica de HTML. Si lo que deseas es que varios links tengan un comportamiento parecido (que cambia por ve tu a saber que parámetro) necesitas otro tipo de selector, ya sea por etiqueta o por clase. Tengo idea como hacerlo con JS puro; sin embargo desde hace rato que uso jQuery porqué la cuestión de los selectores es más sencilla y "flexibe" hasta cierto punto. Digamos, tienes una lista que es modificada en tiempo de ejecución, en la que agregas o eliminas digamos un horario y necesitas que cada hora agregada pueda ser eliminada en caso de haber error. Para ello con jQuery haces algo como:
 

Es un ejemplo muy vago, pero, al fin cumple su función, selecciona a todos los elementos que cuenten con la clase "deleteHour" para hacer dicha función (eliminar una hora de la lista).

O incluso si quieres asignar más de una ves una función puedes hacer algo cómo:
 

Todo dependerá de lo que necesites.
¿Me expliqué o no entendí la pregunta?

wishmaster77, me quedo claro con la ultima explicacion, gracias.