Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/08/2009, 09:47
una_xikilla
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 15 años, 8 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>