style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

¿Como hacer tabs con botones con HTML?

Hola a todos.

Pues sí, es pregunta.

Tengo ( la razón no importa mucho ) que simular "tabs"

( no importa la imagen, es solo un ejemplo )

Pero utilizando botones HTML

Ya tengo la navegación y todo, ahora lo que me hace falta es pues que se vea como tabs.

Sé que esto se puede hacer con CSS, pero simplemente mi conocimiento sobre CSS apesta. También sé que se puede hacer con JavaScript... ahí no estoy tan mal pero tengo la restricción ( autoimpuesta ) de no poner bibliotecas .js ( no quisiera empezar a llenar esto con archivos "ajenos" solo para sacar un par de funciones, pero si está justificado ... venga!! )

Espero que alguien pueda dirigirme en la dirección correcta.

Saludos.

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de Nopalin

Pues, con css no se puede,

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

ooops

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

Imagen de neko069

Pues si es más o menos como

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

Tienes tus botones:
botones

Podrías meter los botones en una tabla.

botones dentro de la 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.

botones dentro de la tabla y css

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.

Imagen de Nopalin

Pues creo que la fuente de

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

jQuery

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:
http://www.extratuts.com/amazing-jquery-tabs-tutorials

Gracias a ambos. Lo que

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

Imagen de neko069

Cómo que no???

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

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.

Bueno llegando tarde pero llegando

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

Muy cerca de lo que necesito:

enter image description here

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.

Click en vinculo

pues de hecho puedes meterle el evento onclick a un elemento HTML

<a href="#" onclick="javascript:alert('aqui metes algo')">cosa</a>

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:<a

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

<a href="#"> onlick="javascript:document.getElementById("miBoton").click()" />

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

Imagen de Nopalin

Usan div

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

Imagen de beto.bateria

Simular botones

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

<div class="options">
<div onclick="firstObjects()">&lt;&lt;</div>
<div onclick="previousObjects()">&lt;</div>
<div onclick="nextObjects()">&gt;</div>
<div onclick="lastObjects()">&gt;&gt;</div>
</div>

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

.options div  {
        background: #CCCCCC;
        color: #222222;
        width: 8em;
       
        font-family: Sans-Serif;
        font-size: 1em;
       
        display:inline;
       
        padding: 6px;
        margin: 13px;
        border-style:solid;
        border-width:1px;
        border-color: #777777;
        border-radius: 5px;
       
        box-shadow: 4px 4px 10px #777777;
}

.options div:hover {
        background: #EEEEEE;
       
        border-style:solid;
        border-width:1px;
       
        border-color: #AAAAAA;
        color: #222222;
}

Re: Ajá.. lo que ví es:<a

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

document.getElementById('link').onclick = function(){ //Código necesario }

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

 #link { background-color: #ccc; text-decoration:none;}
#link:hover{ background-color: #dfd; text-decoration:underline;}

Y ya es más "natural".

Imagen de beto.bateria

wishmaster77 tengo

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?

Re: wishmaster77 tengo

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:

$('.deleteHour').click(function(){
--var confirmMessage = "¿Está seguro qué desea eliminar la hora " + $(this).attr('hora') + "?";
--if(confirm(confirmMessage){
----$(this).remove();
--}
});

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:

var kx = document
var funcionDeVariosBotones = function(){ /*Lo que quieras hacer*/};
//Y ya únicamente la añades a los elementos que necesites:
kx.getElementById('link_one').onclick = funcionDeVariosBotones;
kx.getElementById('link_two').onclick = funcionDeVariosBotones;
kx.getElementById('link_three').onclick = funcionDeVariosBotones;

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

Imagen de beto.bateria

wishmaster77, me quedo claro

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

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">