un sencillo sistema de pestañas

Ahora que están de moda los sistemas de pestañas, yo también me subo al carro de la moda y propongo mi propio sistema al margen de frameworks. Un poco de html, algo de css y el javascript de toda la vida.

Lo primero de todo es crear la estructura que queremos que siga el sistema. En mi caso quiero hacer un panel limitado en tamaño, para pongamos por ejemplo, un panel de configuración.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="panel">
<ul id="tabs">
<li id="tab_01"><a href="#">opción 1</a></li>
<li id="tab_02"><a href="#">opción 2</a></li>
<li id="tab_03"><a href="#">opción 3</a></li>
<li id="tab_04"><a href="#">opción 4</a></li>
</ul>
<div id="paneles">
<div id="panel_01">panel para la opción 1</div>
<div id="panel_02">panel para la opción 2</div>
<div id="panel_03">panel para la opción 3</div>
<div id="panel_04">panel para la opción 4</div>
</div>
</div>

A cada elemento de la lista de los paneles les añadimos un identificador para después poder ocultarlos y/o mostrarlos según nos convenga. De momento debería de verse así

A continuación viene la parte más divertida, darle forma y color.
Para la forma de las pestañas, usaremos la siguiente imagen:

Los estilos serían algo similar a esto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/* tamaño y forma del panel principal */
div#panel {
position: relative;
width:400px;
height: 300px;
}

/* configuracion de las pestañas */
ul#tabs {
position:absolute;
left: 0px;
top: 0px;
margin:0;
padding:0;
width: 400px;
height: 24px;
z-index: 20;
}
ul#tabs li {
float:left;
height: 23px;
padding-left: 8px;
list-style: none;
margin-right: 1px;
background: url(tabs.png) left -48px;
}
ul#tabs li.actual {
height: 24px;
background: url(tabs.png) left -72px;
}
ul#tabs li a {
display: block;
/* hack para ie6 */
.display: inline-block;
/* fin del hack */
height: 23px;
line-height: 23px;
padding-right: 8px;
outline: 0px none;
font-family: arial;
font-size: 10px;
text-decoration: none;
color: #000;
background: url(tabs.png) right 0px;
}

ul#tabs li.actual a {
height: 24px;
line-height: 24px;
background: url(tabs.png) right -24px;
cursor: default;
}

/* Configuración de los paneles */
div#panel #paneles {
position:absolute;
left: 0px;
top: 23px;
width: 398px;
height: 275px;
border: 1px solid #91a7b4;
background: #fff;
overflow: hidden;
z-index: 10px;
}
div#panel #paneles div {
margin:10px;
width: 378px;
height: 255px;
font-family: arial;
font-size: 12px;
text-decoration: none;
color: #000;
overflow: auto;
}

Por lo que el resultado debería ser igual a esto.

Como la cosa ya va tomando forma, necesitamos crear una función javascript que nos permita cambiar tanto la apariencia de las pestañas como la visibilida de cada una de las capas destinadas a tal fin.

Para ello creamos una función como esta

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function tab(pestana,panel)
{
pst = document.getElementById(pestana);
pnl = document.getElementById(panel);
psts = document.getElementById('tabs').getElementsByTagName('li');
pnls = document.getElementById('paneles').getElementsByTagName('div');

// eliminamos las clases de las pestañas
for(i=0; i< psts.length; i++)
{
// Para evitar meternos en temas de dom
// hacemos que la clase sea vacío
psts[i].className = '';
}

// Añadimos la clase "actual" a la pestaña activa
pst.className = 'actual';

// ocultamos todos los paneles
for(i=0; i< pnls.length; i++)
{
pnls[i].style.display = 'none';
}

// Y mostramos el panel que nos interesa
pnl.style.display = 'block';
}

Al final de nuestro documento, mostramos la pestaña que queremos tener activa de esta forma

1
2
3
<script type="text/javascript">
tab('tab_01','panel_01');
</script>

Y esta misma función será la que utilicemos en cada enlace para poder mostrar/ocultar nuestra información.

1
2
3
4
5
6
<ul id="tabs">
<li id="tab_01"><a href="#" onclick="tab('tab_01','panel_01');">opción 1</a></li>
<li id="tab_02"><a href="#" onclick="tab('tab_02','panel_02');">opción 2</a></li>
<li id="tab_03"><a href="#" onclick="tab('tab_03','panel_03');">opción 3</a></li>
<li id="tab_04"><a href="#" onclick="tab('tab_04','panel_04');">opción 4</a></li>
</ul>

[ ver resultado final ] [ descargar ]

71 comentarios.


  • 2 de julio de 2009 a las 23:25
    mola dice...
    Rula que te cagas neno! Muchas gracias, lo analizo e intento aprender a hacerlo.
    Responder

  • 3 de julio de 2009 a las 12:06
    cmacias dice...
    Me alegro de que te pueda ser útil ;)
    Responder

  • 14 de julio de 2009 a las 21:43
    Roxseni gonzalez dice...
    buenos dias, ayudarme en algo.... primero: Hay alguna manera de colocar las pestañas en lugar de horizontal -como el ejemplo que muestras- vertical?
    y segundo. exactamente dnde inserto ese codigo.....
    de antemano gracias
    Responder

  • 15 de julio de 2009 a las 0:04
    cmacias dice...
    Hola Roxseni, es muy sencilo, sólo debes buscar en la hoja de estilos la línea donde pone "ul#tabs li" y eliminar "float:left;".

    De esa forma, las pestañas no "flotarán" a la izquierda y mantendrán su orientación por defecto, que es la vertical.
    Responder

  • 12 de agosto de 2009 a las 6:23
    Diseño web dice...
    ¿cmacias puedo poner esta noticia en una de mis paginas? como es logico pondre un link a tu pagina. Un saludo
    Responder

  • 12 de agosto de 2009 a las 12:27
    cmacias dice...
    @DiseñoWeb, encantado de que lo hagas. No necesitas pedir permiso ;)

    Un saludo
    Responder

  • 2 de octubre de 2009 a las 2:12
    Rodolfo dice...
    Muy interesante, pero como hago pàra que al seleccionar una viñeta o tab, salga un recuadro en donde podre colocar formularios para llenar, y una vez llenados, pueda cambiar de viñeta sin que esta información cambie.....
    Responder

  • 2 de octubre de 2009 a las 2:15
    Rodolfo dice...
    Creo que no me deje entender, puedo poner formularios en lugar de textos dentro de los cuadros una vez seleccionado las viñetas? y deseo que la informacion ingresada se mantenga, podrian ayudarme? gracias.
    Responder

  • 2 de octubre de 2009 a las 2:26
    Rodolfo dice...
    Otra pregunta si no paresco muy cargoso, en la parte donde explican como hacerlo vertical, como haria apra que el resultado se vea al lado derecho y no al inferior?
    Responder

  • 2 de octubre de 2009 a las 2:39
    Rodolfo dice...
    Ehhhhhh, ya esta, eso me pasa por no revisar bien antes de preguntar, pero al ponerlo como vertical se deforma..... :o(
    Responder

  • 2 de octubre de 2009 a las 3:00
    Rodolfo dice...
    Estimados amigos, aqui les tengo una tareita y espero me puedan ayudar. Me gusto mucho los tabs,y quiero saber como puedo anexar esos paneles a un menu vertical, con las mismas caracteristicas, aqui les dejo el menu. Gracias.




    Menu Vertical


    body #button li a {
    width: auto;
    }

    #button li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }

    #button li #active {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    -->






    Home
    Products
    Services
    Support
    Order
    News
    About



    Responder

  • 2 de octubre de 2009 a las 3:04
    Rodolfo dice...
    &lt;!--



    Menu Vertical



    /* CSS Tabs */
    #button {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Tahoma, Arial, sans-serif;
    /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
    font-size : 10px;
    background-color: #90bade;
    color: #333;
    }

    #button ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #button li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    list-style: none;
    list-style-image: none;
    }

    #button li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

    html&gt;body #button li a {
    width: auto;
    }

    #button li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }

    #button li #active {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }







    Home
    Products
    Services
    Support
    Order
    News
    About




    --&gt;
    Responder

  • 2 de octubre de 2009 a las 4:08
    Diseño web dice...
    rodolfo pesao me han venio 6 mensajes seguidos a las 3 de la mañana. Me puse para recibir notificaciones. si me acuerdo mañana intento ayudarte, un saludo
    Responder

  • 12 de octubre de 2009 a las 2:46
    Vito dice...
    Buen programa, lo apique en un formulario, pero una duda. Tengo mi base de datos en PHP e incruste los input text y selects en los marcos y debajo de los tabs puse un botn para grabar.

    ¿Como obtengo los valores que ingrese para pasarlos a mi base de datos? Aun no le atino, ¿quien me puede ayudar?
    Responder

  • 12 de octubre de 2009 a las 3:04
    Vito dice...
    Por cierto, ya intente con:
    $nb=$_POST["Form1.TxtApRc"];
    $nb=$_POST["TxtApRc"];
    y nada, no captura el valor..... Espero me puedan ayudar, gracias
    Responder

  • 12 de octubre de 2009 a las 8:23
    cmacias dice...
    Si el código lo tienes fuera de los marcos, y el formulario dentro, obviamente no te funcionará. Tanto el formulario como el código deben ir en el mismo lugar.

    Piensa que las páginas que cargan en los marcos son totalmente independientes de la página donde los cargas.
    Responder

  • 4 de enero de 2010 a las 13:03
    sonia dice...
    Hola: yo es esto lo que tengo ahora necesito averigüar otra cosa. Si cojo la opción 2 y tubiera un boton de imprimir, lo que quiero es imprimir unicamente la pestaña que seleccione, me podias asesorar un poco como hacerlo, le estoy dando mil vueltas y no lo consigo. Muchas gracias.Sonia
    Responder

  • 4 de enero de 2010 a las 13:44
    cmacias dice...
    Yo haría lo siguiente. A la capa que deseas imprimir le colocaría una clase determinada, como por ejemplo "class=print".

    En la hoja de estilo principal, le añadiría un "media=screen" y añadiría una nueva hoja de estilos con un "media=print" en donde colocaría los estilos a usar dentro de esa capa a imprimir. Obviamente, el resto de estilos de la página, deberían ir con un "display:none" para no ser interpretados por el navegador a la hora de imprimir.
    Responder

  • 4 de enero de 2010 a las 14:09
    sonia dice...
    muchas gracias. Lo pruebo y cuando lo tenga te comento.
    Responder

  • 28 de febrero de 2010 a las 14:38
    Rafalinux dice...
    El sistema de pestañas que has creado es muy sencillo, pero increíblemente potente. Lo he probado y es muy bueno, aunque le tengo que sacar un "pero". En cada panel he intentado poner conenido. Estos contenedores se llevan muy bien con las etiquetas , y , pero si quiero poner otro DIV, por ejemplo, si quisiera anidad otro sistema de pestañas debajo del principal, no se puede (o yo no puedo, al menos). No sé si el problema es del CSS o del core de Javascript, a pesar de que he intentado incluir DIV como contenido de los paneles.
    ¿Has probado a hacerlo? ¿Te funciona?
    Gracias por adelantado y muy buen trabajo. Enhorabuena.
    Responder

  • 28 de febrero de 2010 a las 17:28
    Rafalinux dice...
    Vaya, en mi mensaje de antes no me he explicado bien. Quise decir que etiquetas como P, SPAN, etc., funcionan sin problemas. Pero cualquier etiqueta DIV que pongo dentro de los paneles no aparece.
    He estado revisando el CSS y no creo que sea de allí. Estoy un poco perdido, la verdad.
    Responder

  • 1 de marzo de 2010 a las 13:28
    cmacias dice...
    Hola Rafa, efectivamente acabo de ver el problema que comentas del "div". Para ocultar el div, hago un recorrido de los "div" que hay dentro del panel. Al meter un div dentro de otro, este último entra en el recorrido y se oculta, y por eso no lo ves.

    Esto me lleva a rehacer el código para que solo tenga en cuenta los div contenedores, por lo que aprovecharé y le meteré nuevas funcionalidades y las publicaré.

    Un saludo y gracias por tu indicación.
    Responder

  • 1 de marzo de 2010 a las 23:43
    Rafalinux dice...
    Sí, ayer estuve comprobando el comportamiento de los DIV, y llegué también a esa conclusión. De todas maneras, si uso la etiqueta SPAN funciona perfectamente.
    No creo que debas modificar el código, porque creo que es muy sencillo, fácil de entender y muy potente.
    Mi problema con los DIV dentro de los paneles era simplemente porque necesitaba incluir una aplicación en Javascript que utilizaba un DIV como referencia. La solución la he encontrado al hacer a div#panel con menos anchura: en lugar de 100% le he dado 80%, y el resto lo utilizo para una especie de menú lateral.

    SOLUCIONADO!

    Gracias por contestar tan rápido! Saludos!
    Responder

  • 2 de marzo de 2010 a las 0:15
    cmacias dice...
    Otra solución sería cambiar en el código la llamada a los contenedores.

    En vez de :
    getElementsByTagName('div');

    poner :
    getElementsByTagName('h4');

    Y obviamente cambiar en los paneles los "div" por "h4". De esta manera puedes colocar tantos div dentro como necesites.

    Otra cosa sería hacerlo "como Dios manda" y restringir el bucle solamente a cada primer div. Por eso como solución rápida está bien, pero mejor si se puede usar sin restricciones, verdad ?

    Un saludo
    Responder

  • 3 de marzo de 2010 a las 22:55
    Rafalinux dice...
    Sí, tienes razón, pero he encontrado otra solución: utilizar SPAN en lugar de DIV, de modo que se tienen los mismos efectos, pero sin interferirse con DIV.

    Me dí cuenta del problema cuando quise introducir un calendario hecho en Javascript. Dado que utilizaba muchos DIV para dibujarse en la página, o bien daba error, o bien no aparecía, directamente.

    Para rizar el rizo, intentaré colocar pestañas anidadas dentro del bloque de pestañas principal, y lo intentaré con SPAN o como nos has sugerido. Ya te contaré!

    Saludos y GRACIAS!
    Responder

  • 26 de septiembre de 2010 a las 17:18
    Antonio dice...
    Hola, me parace muy interesante. Lo he incorporado y funciona perfectamente. Pero quisiera hacerte una prengunta. Si en vez de 400px quisiera hacerlo en ancho de 600px, qué tengo que hacer pues he incorporado 7 solapas y aunque cuando lo hago aparece con el ancho de 600, cuando lo subo no lo coge y sale de 400px. He modificado la imagen tabs.pgn a 600 px. pero no consigo que aparezca en el ancho de 600px.
    Disculpa si es una pregunta de novato.
    Gracias de todos modos
    Responder

  • 26 de septiembre de 2010 a las 17:44
    cmacias dice...
    Hola Antonio, prueba con lo siguiente:

    Cambia el ancho en las clases "div#panel" y "ul#tabs" a 700px

    Luego, cambias la clase "div#panel div#paneles" a 698. Porqué ? porque en el caso del ejemplo, tiene un borde de 1px, por lo que restamos 2 pixels del lado derecho y del lado izquierdo. 700-2=698.

    Por último cambias el ancho en "div#panel #paneles div" de 378px a 678px. Los 2px del borde más los 10px del padding.

    Así, con estos cambios debería funcionar correctamente.
    Responder

  • 26 de septiembre de 2010 a las 19:58
    Antonio dice...
    Muchas gracias, pero ahora lo que me pasa es que no me coge el alto
    Puedes verlo aquí:
    http://www.data-red.com/cgi-bin/buscar-entrada.cgi?keywords=6604100924200112
    Gracias por tu ayuda
    Responder

  • 26 de septiembre de 2010 a las 21:02
    cmacias dice...
    Fíjate que en div#paneles le tienes un alto de 20px, por eso te sale pequeño. Prueba a darle un valor más alto, como 400px;
    Responder

  • 11 de febrero de 2011 a las 12:56
    Iraide dice...
    Y como para que admita codigo javascript dentro?
    Muchas gracias!!!
    Responder

  • 11 de febrero de 2011 a las 13:10
    cmacias dice...
    Hola Iraide, no deberías tener problema alguno para meter javascript dentro del content de las pestañas. Quieres meterlo en algún sitio concreto ?
    Responder

  • 11 de febrero de 2011 a las 13:26
    Iraide dice...
    Hola!!
    Gracias por contestar tan rapido!
    Se trata de un fichero jsp, donde he incluido un panel y dentro del mismo varios trozos de código javascript( ). No se visualiza lo que está entre estas partes de codigo javascript. Necesito incluir una tabla donde los resultados los obtengo mediante javascript.
    Espero me haya explicado bien. Sino adjuntaré parte código..
    Muchas gracias!!
    Responder

  • 11 de febrero de 2011 a las 13:34
    cmacias dice...
    Si utilizas tablas dentro de esos resultados puede darse el caso que no se muestren por la forma en que está realizado el script. No obstante cualquier cosa que tu metas dentro de cada uno de los paneles debería verse sin problema alguno.

    Algo que si podrías hacer (sobre todo si navegas con firefox) es utilizar el Firebug para ver que es lo que está pasando dentro de la capa donde debiera aparecer tu contenido.

    Controla también (sobre todo si usas firefox) los iconos que te avisan de errores de js.

    Un saludo,
    Carlos.
    Responder

  • 11 de febrero de 2011 a las 13:40
    Iraide dice...
    muchas gracias!!
    Con firebug no veo nada, desaparece toda esa parte de código, y parece que no hay errores javascript....
    voy seguir mirando,
    Saludos!!
    Responder

  • 11 de febrero de 2011 a las 13:48
    cmacias dice...
    No te muestra nada dentro ? Muestra más código después de donde supuestamente debiera aparecer tu código ? Puedes cargar el js y meter un document.write('algo') simplemente para ver si te devuelve algo ?
    Responder

  • 16 de febrero de 2011 a las 16:01
    iraide dice...
    Hola!
    Solucionado, era como decías tu, reiniciar y pillar todo, sin problemas, muchas gracias por todo!!!
    Responder

  • 16 de febrero de 2011 a las 17:50
    cmacias dice...
    Un placer :)

    Un saludo
    Responder

  • 29 de marzo de 2011 a las 18:54
    Iván dice...
    Muy buenas!
    Lo primero, felicitarte, un trabajo muy bueno.
    He podido adaptarlo perfectamente cambiando los estilos, pero tengo un pequeño problema.
    No consigo que toda la capa de pestañas, la primera (panel), se posicione seguida de otro , sino que se superponen.
    ¿Alguna idea?

    Gracias!
    Responder

  • 29 de marzo de 2011 a las 19:03
    cmacias dice...
    Hola !
    Se te superpone el panel de pestañas al panel de textos ? o son unas pestañas sobre otras ?
    Responder

  • 30 de marzo de 2011 a las 11:10
    Iván dice...
    Buenas de nuevo,
    Me refería al resto de documento, pero ya lo he solucionado poniendo alturas fijas :)
    Gracias.
    Responder

  • 30 de marzo de 2011 a las 11:16
    cmacias dice...
    Un buen truco si utilizas floats (por ejemplo para flotar las pestañas o el content con respecto a las pestañas) es añadirle un "overflow:hidden".

    Un saludo y gracias por tu visita :-)
    Responder

  • 16 de abril de 2011 a las 6:45
    Alex Ocampo Hidalgo dice...
    Me gusto el articulo del tab ~ pero me queda una duda que plantearon arriba y no tuvo respuesta, espero ser claro y poder solucionar mi duda. Dentro del tab, no quiero introducir texto sino cargar una pagina pero que el tab siga viendose arriba, osea que la pagina se cargue solo dentro del panel y asi si quiero usar otra tab solo le doy click y recarga la pagina.

    Saludos.
    Responder

    • 16 de abril de 2011 a las 10:02
      cmacias dice...
      Hola Alex. Bajo mi punto de vista puedes hacer dos cosas. La que menos me gusta, usar un iframe y dentro cargar la página que quieras. La otra, utilizar ajax y usar esta tecnología para cargar una página sin por ello tener que recargar toda la página. Bien puedes crear tu propia función Ajax o bien utilizar las propias de jQuery que son muy fáciles de utilizar.
      Espero que te haya solucionado la duda.

      Un saludo,
      Carlos.
      Responder

  • 4 de mayo de 2011 a las 13:48
    Emilio dice...
    Hola,
    conseguiste solucionar los de los divs sin restricciones dentro del panel div en el sistema de pestañas, pq he intentado usar el pero no lo he conseguido.
    Responder

  • 4 de mayo de 2011 a las 14:38
    cmacias dice...
    Hola Emilio,

    Pués si, lo conseguí. De hecho entre hoy y mañana procuraré escribir un nuevo post en el que propongo una nueva alternativa, en la que además se podrán añadir pestañas dentro de otras ;)
    Responder

  • 16 de diciembre de 2011 a las 19:30
    Karen wendolyn dice...
    MUCHAS GRACIAS!!!!!!!!!!!!!!!!!!! ME ACABAS DE SALVAR LA VIDA!!!!! muy bueno, muchas gracias.
    Responder

  • 16 de diciembre de 2011 a las 20:01
    cmacias dice...
    karen, no sabes lo que me alegra oir eso. De todas formas tengo otro sistema igual que este pero mejorado en https://www.cmacias.com/otro-sistema-de-pestanas/
    Responder

  • 4 de enero de 2013 a las 16:30
    Wildo Ruiz Crespi dice...
    Muchas gracias, muy buena esta funcionalidad, era lo que realmente estaba buscando.

    Saludos.
    Responder

    • 4 de enero de 2013 a las 16:36
      Carlos dice...
      Un placer ;)
      Responder

  • 17 de enero de 2013 a las 20:15
    Ignasi dice...
    Hola cmacias,

    Te agradezco muchísimo el tiempo que has dedicado a hacer este tutorial, porque es realmente excelente.

    Se entiende perfectamente. Es justo lo que estaba buscando.

    Mil gracias por enseñarnos cómo hacerlo de manera tan sencilla.


    Un saludo,
    Ignasi

    PD: me gustaría saber si es posible hacer lo siguiente: teniendo dos div's (uno de ellos está visible cuando accedes a la página por primera vez), crear una función que permita ocultar el visible y mostrar el oculto con un solo link, no con pestañas. Y que este mismo link sea capaz de hacer otra vez lo mismo pero a la inversa, teniendo en cuenta que con el primer click ya ha cambiado la clase (o como se haga) de ambos div's. Vamos, que sería hacer una especie de conmutador del display (block/none) con un solo link.

    Muchas gracias por adelantado!
    Responder

    • 18 de enero de 2013 a las 7:21
      Carlos dice...
      Un placer Ignasy.

      Lo que comentas SI es posible hacerlo. La forma más sencilla teniendo jQuery cargado es usar la propiedad "toggle()", que te permite commutar un estado.

      Por otro lado, sin jQuery, debes comprobar el estado de la capa a mostrar.

      function muestra(element)
      {
      var capa = document.getElmentById(element);

      if(capa.style.display == 'block')
      {
      capa.style.display = 'none';
      }
      else
      {
      capa.style.display = 'block';
      }
      }

      Una vez creada la función que muestra y oculta, se la aplicas al elemento en el que hagas click

      < a href="#" onclick="muestra(tucapa)" >haz click< /a >
      < div style="display:none" >contenido...< /div >
      Responder

      • 18 de enero de 2013 a las 18:36
        Ignasi dice...
        Hola cmacias,

        ¡No me esperaba una respuesta tan rápida!

        Gracias por el aporte, aunque permíteme que te explique mejor el caso que me gustaría resolver (aún no lo he encontrado por Internet...), porque el que me has expuesto es el que veo en muchas páginas, pero no es exactamente el que necesito.

        Conmutador

        .... --> Por defecto display:block;

        .... --> Por defecto display:none;

        Cuando entras a la web, se te muestra X información en modo lista por defecto.

        Con el enlace "conmutador", quiero permitir al usuario ver esa misma información presentado en modo tabla, por si le es más cómodo.

        Lo de la lista y la tabla espero que no te líe. Es mi caso concreto, pero me da lo mismo si cuando lo expliques me dices que primero muestras una foto y luego otra, ambas en div's independientes.

        La idea es que si el usuario le da una vez al enlace conmutador, ese mismo enlace luego le permita volver a mostrar el div con la lista y ocultar el div con la tabla.

        Gracias de nuevo por tu ayuda.

        Saludos,
        Ignasi

        PD: te agradezco la referencia a la función concreta de jQuery, pero es que no sé instalarlo ni siquiera, con lo cual te haría perder más tiempo... Prefiero intentar hayar una solución con javascript.
        Responder

        • 18 de enero de 2013 a las 18:39
          Ignasi dice...
          Perdón, no me he dado cuenta de que tenía que dejar espacios entre el código para que se mostrara...

          Aquí está:

          Conmutador

          .... --> Por defecto display:block;

          .... --> Por defecto display:none;
          Responder

  • 18 de enero de 2013 a las 18:42
    Ignasi dice...
    No sé hacerlo... lo escribo en pseudo-código:

    link onclick="muestra_oculta(tucapa)" - Conmutador - fin_link

    div clase lista - dentro hay un UL - fin_div --> Por defecto display:block;

    div clase tabla - dentro hay un TABLE - fin_div --> Por defecto display:none;
    Responder

  • 18 de enero de 2013 a las 18:47
    Carlos dice...
    Ignasy, es muy sencillo.

    Debes tener dos capas. Una en modo listado y otra en modo tabla. Cada una de ellas debe tener un ID para diferenciarlas. Por defecto, el "display" de la capa lista es "block" y el de la capa tabla es "none".

    Bien, ahora cogemos la función que hice y la modificamos un poco


    function muestra(element1,element2)
    {
    var capa1 = document.getElmentById(element1);
    var capa2 = document.getElmentById(element2);

    if(capa1.style.display == 'block')
    {
    capa1.style.display = 'none';
    capa2.style.display = 'block';
    }
    else
    {
    capa1.style.display = 'block';
    capa2.style.display = 'none';
    }
    }


    Y lo añadimos al enlace commutador
    < a href="#" onclick="muestra('capa_lista','capa_tabla')" >commutador< /a >

    Prueba, a ver si te vale
    Responder

  • 19 de enero de 2013 a las 12:25
    Ignasi dice...
    ¡Cómo no iba a funcionar! Muchas gracias cmacias, no sabes el peso que me has quitado de encima...

    Aunque tengo que reconocer que por un lapsus he perdido más tiempo de la cuenta en ver por qué no me funcionaba a la primera.

    Al leer tu post había visto que te habías comido una "e" en getElementById, y al copiarlo y pegarlo no me he acordado de corregirlo :P

    La única "pega" que veo es que me funciona al darle dos clics al link, no a la primera. Pensaba que era porque tú escribes el href con almohadilla y luego haces un onclick con la llamada a la función. Y he probado de simplificarlo, es decir, dentro del mismo href hacer la llamada y eliminar el evento onclick, pero el resultado es exactamente el mismo :S

    Saludos,
    Ignasi
    Responder

    • 20 de enero de 2013 a las 10:36
      cmacias dice...
      Ignasy, para que te funcione bien a la primera (es por hacer el código de memoria) vamos a cambiar la forma en que se obtiene el estado de la capa que está mostrándose por defecto.

      Vamos a comprobar que la capa NO está oculta en primera instancia, por lo que al no estarlo, la ocultará y mostrará la siguiente. Te pego el código completo.


      < script>
      function muestra(element1,element2)
      {
      var capa1 = document.getElementById(element1);
      var capa2 = document.getElementById(element2);

      if(capa1.style.display == 'none')
      {
      capa1.style.display = 'block';
      capa2.style.display = 'none';
      }
      else
      {
      capa1.style.display = 'none';
      capa2.style.display = 'block';
      }
      }
      < /script>
      < a href="#" onclick="muestra('capa_lista','capa_tabla')">commutador< /a>
      < div id="capa_lista">Contenido Lista< /div>
      < div id="capa_tabla" style="display:none">Contenido Tabla< /div>
      Responder

      • 22 de enero de 2013 a las 19:28
        Ignasi dice...
        Qué curioso... ahora sí que cambia a la primera.

        Así que en los casos en los que quieres saber el valor del atributo de un elemento para cambiárselo, digamos que tienes que preguntárselo al revés, no?

        Me quedo con que funciona y lo haré así, pero la verdad es que me desconcierta, porque lo veo correcto tanto de una manera como de la otra.

        ¿Tiene alguna explicación lógica?

        Gracias,
        Ignasi
        Responder

        • 22 de enero de 2013 a las 19:43
          cmacias dice...
          En realidad si que tiene su lógica.

          En el ejemplo anterior mediante el if, preguntábamos si su display era block. Como no le asignamos ningún display, su valor es NULL, por lo que al hacer click la primera vez le aplicamos un display block y la segunda el none.

          Por contra, en el segundo ejemplo preguntamos si su display es none. Como al no tener display alguno, no cumple esa norma, le aplicamos el display adecuado.

          Si lo miras bien, tiene su lógica, verdad ?

          Un saludo
          Responder

  • 15 de febrero de 2013 a las 20:52
    Carlos dice...
    Muchas gracias me ayudo bastante, lo aplique y me funciono claro no si antes analizarlo para poder entender saludos desde Juárez Mexico
    Responder

    • 15 de febrero de 2013 a las 23:07
      Carlos dice...
      Carlos, un verdadero placer :)
      Responder

  • 30 de agosto de 2013 a las 20:38
    Antonio dice...
    Hola Macias,

    Soy Antonio Bellil, el creador y fundador de la web gratis
    www.compartetren.com

    Te quiere simplemente decir que eres un MAQUINA.
    Y me alegro mucho que sea ESPANOL y estoy en FRANCIA y quiero que sepa que hablo mucho de tu web a mis colegas porque tu das soluciones sencillas para problemas complicados.

    Saludos

    Antonio
    Responder

    • 31 de agosto de 2013 a las 18:08
      Carlos dice...
      Antonio, muchísimas gracias por tus palabras y tus recomendaciones. Vas a hacer que me sonroje :)

      Gracias !
      Responder

  • 30 de enero de 2014 a las 18:23
    chari dice...
    Me ha servido mucho la solución que has dado aun usuario
    muchas GRACIAS Carlos por tu disponibilidad para compartir.
    Responder

    • 30 de enero de 2014 a las 20:54
      Carlos dice...
      Chari, me alegro de que te haya sido de ayuda y muchísimas gracias a ti por la visita :)
      Responder

  • 16 de abril de 2014 a las 8:10
    Maco dice...
    Felicidades antes de nada por tu tremendo aporte!

    Pero tengo un problemilla con la altura del panel principal: el height de algunas tabs es mayor que el panel principal. Y mi problema es que dichas tabs se "salen" fuera de dicho panel e incluso de los divs que contienen a todo el sistema de pestañas... existe forma de ponerle height automático al panel principal?

    Salu2!
    Responder

  • 22 de abril de 2014 a las 7:32
    Carlos dice...
    Maco, probaste a meterle un "overflow:auto" en las css a la capa de la "tab" ? De esta forma te genera un scroll y no te rebasa el contenido
    Responder

  • 24 de agosto de 2014 a las 14:31
    grisel dice...
    un buen ejemplo,,
    ahora lo que yo necesito es que en vez de los textos este un formulario?se puede hacer??

    este es lo que yo hago,,,pero quisiera hacerlo en pestañas.,,serian una pestaña para formulario de ciudad y otra para nacionalidad,,,etc

    http://localhost:8084/paraelexamen/CIUDAD/CIUDAD.jsp
    Responder

  • 25 de agosto de 2014 a las 8:13
    Carlos dice...
    Grisel, claro que se puede.
    Simplemente deberías añadir el campo de formulario () fuera de la capa con id "panel", y destro de "panel_01, panel_02, etc" los distintos campos que quieras mostrar en las distintas pestañas.
    Responder

  • 1 de febrero de 2015 a las 20:40
    belen dice...
    hola amgo.. gracias por tu ayuda.. solo que tengo un problema , la intente implemntar en un apagina que estoy realizando en la escuela y no me sale.. siento que algun estilo se esta conminando ..pliss ayuda
    Responder

    • 1 de febrero de 2015 a las 23:26
      Carlos dice...
      Belén, te sale algún mensaje de error ? En principio debería funcionar ya que el código no depende de ningún framework. Has añadido las css ?
      Un saludo
      Responder
Deja tu comentario