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>