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>