Foros del Web » Creando para Internet » HTML »

Duda tonta con pestañas

Estas en el tema de Duda tonta con pestañas en el foro de HTML en Foros del Web. Hola! Quiero usar pesatañas en mi página web, pero la duda tonta que tengo es: cómo hago para que la primera pestaña aparezca abierta? Aquí ...
  #1 (permalink)  
Antiguo 13/08/2009, 10:47
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 9 años, 3 meses
Puntos: 0
Duda tonta con pestañas

Hola!
Quiero usar pesatañas en mi página web, pero la duda tonta que tengo es: cómo hago para que la primera pestaña aparezca abierta?

Aquí dejo mi código:

Código HTML:
<style>
<!--

ul.menuList {border-bottom: 1px solid #005583; margin: 0; padding-bottom: 34px; padding-left: 10px}
ul.menuList li {display: inline; list-style-type: none; margin: 0; padding: 0}
ul.menuList li a {background: #007AB5; border: 1px solid #005583; color: #FFFFFF; float: left; font-family: Verdana; font-size: 12px; font-weight: bold; line-height: 14px; margin-right: 2px; padding: 2px 10px 2px 10px; text-decoration: none}
ul.menuList a:link.active, ul.menuList a:visited.active {background: #E0F7AA; border-bottom: 1px solid #ffffff; color: #000000}
ul.menuList a:hover {color: #FFFF66}
ul.menuList li.selected a {background: #005583; border-bottom: 1px solid #005583; color: #FFFFFF; font-weight: bold}
div.tabcontents {border: 1px solid #005583; border-top: 0px}
div.tabcontent {padding: 5px; display: none}
div.tabcontentSelected {border: 1px solid #E0F7AA; padding: 5px; display: block; background: #005583}
//-->
</style>
<script lang="javascript">
<!--
function muestra(menuSelected, tabs, cuerpos) {
    var menu = document.getElementById(tabs);
    var items = menu.getElementsByTagName("li");
    var cuerpos = document.getElementById(cuerpos);
    var itemsCuerpos = cuerpos.getElementsByTagName("div");
    for (var i = 0; i < items.length; i++) {
        if (items[i] != menuSelected.parentNode) {
            items[i].className = "";
            itemsCuerpos[i].className = "tabcontent";
        } else {
            menuSelected.parentNode.className = "selected";
            itemsCuerpos[i].className = "tabcontentSelected";
        }
    }
}
//-->
</script>
<!-- Tablas con contenido -->
<ul id="tabsglobal" class="menuList">
    <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;"><img src="imagenes/IconoPersonal.jpg" width="23" height="25" border="0"/> Mi área </a></li>
	<li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;"><img src="imagenes/preferencias.gif" width="21" height="25" border="0"/> Datos Personales </a></li>
    <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;"><img src="imagenes/casa2.jpg" width="32" height="26" border="0"/> Estudios</a></li>
    <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;"><img src="imagenes/estudios.PNG" width="23" height="27" border="0"/> Experiencia</a></li>
	<li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;"><img src="imagenes/IconoCorreo.gif" width="27" height="27" border="0"/>Preferencias </a></li>
</ul>
<!-- Pestañas con resto de datos económicos -->

<div id="cuerposglobal" class="tabcontents">
<div class="tabcontent">
    Contenido 1
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="tabcontent">
    Contenido 2
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="tabcontent">
    Contenido 3
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="tabcontent">
    Contenido 4
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="tabcontent">
    Contenido 5
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div> 
  #2 (permalink)  
Antiguo 13/08/2009, 17:46
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Duda tonta con pestañas

Hola:

Échale un vistazo a la página de Mikmoro, www.araudi.net, tiene algún ejemplo de pestañas.

Saludos.

  #3 (permalink)  
Antiguo 17/08/2009, 09:28
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Duda tonta con pestañas

ya he visto los ejemplos, pero me gustaría saber cómo se hacen! jejej.

O por lo menos que alguien me resuelva la duda que tengo (que yo creo que no debe ser muy difícil...)

AYUDAAAAAAAAAAAAAAAAAAA
  #4 (permalink)  
Antiguo 17/08/2009, 10:19
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 2 meses
Puntos: 49
Respuesta: Duda tonta con pestañas

es solo css no cuesta nada copiar pegar el código e ir quitando cosas haber que pasa :/
que pasa si quito esto, etc...
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #5 (permalink)  
Antiguo 17/08/2009, 10:28
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Duda tonta con pestañas

Gracias por la solución, pero ya lo he intentado y no me sale.
Ya sé que debe ser una tontería, pero nada...

Alguien me puede ayudar?
  #6 (permalink)  
Antiguo 17/08/2009, 14:28
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 2 meses
Puntos: 49
Respuesta: Duda tonta con pestañas

mira en esta pagina copia el codigo y luego la hoja de estilos y vas viendo....
http://disenamos.com/articulos/css/n...jemplos/1.html

si eres de los que no saben mirar el fuente te dejo la CSS
Código css:
Ver original
  1. /*
  2.     Creado por Oscar Alcalá (Bio) para Diseñamos
  3.     http://www.obstinated.net
  4. */
  5.  
  6. body { /*Elementos generales del documento*/
  7.     background: #FFF;
  8.     font-family: "Trebuchet MS", Verdana, Arial, Serif;
  9.     font-size: 11px;
  10.     font-weight: bold;
  11.     background: #BADB77;
  12. }
  13.  
  14. ul {
  15.     width: 750px;
  16.     list-style: none; /*Eliminamos el estilo de lista*/
  17.     padding: 0; /*Evita la indentación que aparece en algunos navegadores*/
  18.     margin: 0;
  19.     display: inline; /*Nos permite integrar con los elementos li y evitar problemas -*/
  20.     float: left;      /*en algunos navegadores*/
  21.     border-bottom: 1px Solid Black;
  22. }
  23.  
  24. ul li {
  25.     width: 100px;
  26.     display: block;
  27.     float: left; /*Flota los elementos de la lista*/
  28.     text-align: center;
  29.     margin-right: 10px;
  30.     position: relative; /*Hacemos el ajuste de 1 pixel para simular la integración -*/
  31.     top: 1px;           /*con la capa de contenido*/
  32. }
  33.  
  34. ul li a {
  35.     width: 100px; /*Fijamos el ancho para que el enlace sea toda la pestaña y no solo el texto*/
  36.     display: block;
  37.     background: #3B9CCC;
  38.     border: 1px Solid #000;
  39.     text-decoration: none;
  40. }
  41.  
  42. ul li a:link, ul li a:visited, ul li a:active {
  43.     color: #000;
  44. }
  45.  
  46. ul li a:hover {
  47.     color: #CEE59F;
  48. }
  49.  
  50. /*Clase especial que resaltará dependiendo de la sección*/
  51. a.actual {
  52.     width: 100px;
  53.     display: block;
  54.     background: #77BADB;
  55.     border-top: 1px Solid #000;
  56.     border-bottom: 1px Solid #77BADB;
  57.     text-decoration: none;
  58. }
  59.  
  60. a.actual:link, a.actual:visited, a.actual:active {
  61.     color: #000;
  62. }
  63.  
  64. a.actual:hover {
  65.     color: #000;
  66. }
  67.  
  68. #contenido {
  69.     width: 750px;
  70.     background: #77BADB;
  71.     float: left;
  72.     margin: 0;
  73.     border-left: 1px Solid #000;
  74.     border-bottom: 1px Solid #000;
  75.     border-right: 1px Solid #000;
  76.     font-weight: normal;
  77. }
  78.  
  79. #contenido p {
  80.     margin: 15px 20px;
  81. }

espero ahora puedas hacer lo que deseas ;)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #7 (permalink)  
Antiguo 19/08/2009, 09:56
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Duda tonta con pestañas

muchas gracias pero sigo sin que me salga ;(
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:26.