Duda tonta con pestañas

[una_xikilla]

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> 

[jomaruro]

Hola:

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

Saludos.

[una_xikilla]

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

[kaninox]

es solo css no cuesta nada copiar pegar el código e ir quitando cosas haber que pasa :/
que pasa si quito esto, etc...

[una_xikilla]

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?

[kaninox]

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:

/*
    Creado por Oscar Alcalá (Bio) para Diseñamos
    http://www.obstinated.net
*/
 
body { /*Elementos generales del documento*/
    background: #FFF;
    font-family: "Trebuchet MS", Verdana, Arial, Serif;
    font-size: 11px;
    font-weight: bold;
    background: #BADB77;
}
 
ul {
    width: 750px;
    list-style: none; /*Eliminamos el estilo de lista*/
    padding: 0; /*Evita la indentación que aparece en algunos navegadores*/
    margin: 0;
    display: inline; /*Nos permite integrar con los elementos li y evitar problemas -*/
    float: left;      /*en algunos navegadores*/
    border-bottom: 1px Solid Black;
}
 
ul li {
    width: 100px;
    display: block;
    float: left; /*Flota los elementos de la lista*/
    text-align: center;
    margin-right: 10px;
    position: relative; /*Hacemos el ajuste de 1 pixel para simular la integración -*/
    top: 1px;           /*con la capa de contenido*/
}
 
ul li a {
    width: 100px; /*Fijamos el ancho para que el enlace sea toda la pestaña y no solo el texto*/
    display: block;
    background: #3B9CCC;
    border: 1px Solid #000;
    text-decoration: none;
}
 
ul li a:link, ul li a:visited, ul li a:active {
    color: #000;
}
 
ul li a:hover {
    color: #CEE59F;
}
 
/*Clase especial que resaltará dependiendo de la sección*/
a.actual {
    width: 100px;
    display: block;
    background: #77BADB;
    border-top: 1px Solid #000;
    border-bottom: 1px Solid #77BADB;
    text-decoration: none;
}
 
a.actual:link, a.actual:visited, a.actual:active {
    color: #000;
}
 
a.actual:hover {
    color: #000;
}
 
#contenido {
    width: 750px;
    background: #77BADB;
    float: left;
    margin: 0;
    border-left: 1px Solid #000;
    border-bottom: 1px Solid #000;
    border-right: 1px Solid #000;
    font-weight: normal;
}
 
#contenido p {
    margin: 15px 20px;
}
 

espero ahora puedas hacer lo que deseas ;)

[una_xikilla]

muchas gracias pero sigo sin que me salga ;(