Tema: Navegación con pestañas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/03/2010, 12:01
Avatar de canzoneta
canzoneta
 
Fecha de Ingreso: diciembre-2003
Ubicación: Mendoza
Mensajes: 79
Antigüedad: 20 años, 4 meses
Puntos: 1
Pregunta Navegación con pestañas
Hola amigos foreros. Tengo el siguiente código, pero necesito que al cargar la página, ya la cargue con el contenido de alguna pestaña. ¿Qué es lo que tendría que modificar?

Código CSS: 
Ver original
  1. <style> 
  2. ul.menuList {border-bottom: 1px solid #589901; margin: 0; padding-bottom: 19px; padding-left: 10px}
  3. ul.menuList li {display: inline; list-style-type: none; margin: 0; padding: 0}
  4. ul.menuList li a {background: #A0B75A; border: 1px solid #589901; color: #000000; float: left; font-family: arial; font-size: 12px; font-weight: bold; line-height: 14px; margin-right: 2px; padding: 2px 10px 2px 10px; text-decoration: none}
  5. ul.menuList a:link.active, ul.menuList a:visited.active {background: #E0F7AA; border-bottom: 1px solid #ffffff; color: #000000}
  6. ul.menuList a:hover {color: #E0F7AA}
  7. ul.menuList li.selected a {background: #EBEFDE; border-bottom: 1px solid #E0F7AA; color: #000000; font-weight: bold}
  8. div.tabcontents {border: 1px solid #589901; border-top: 0px}
  9. div.tabcontent {padding: 5px; display: none}
  10. div.tabcontentSelected {border: 1px solid #E0F7AA; padding: 5px; display: block; background: #EBEFDE}
  11. </style>

Código Javascript: 
Ver original
  1. <script lang="javascript"> 
  2.  
  3. function muestra(menuSelected, tabs, cuerpos) {
  4.     var menu = document.getElementById(tabs);
  5.     var items = menu.getElementsByTagName("li");
  6.     var cuerpos = document.getElementById(cuerpos);
  7.     var itemsCuerpos = cuerpos.getElementsByTagName("div");
  8.     for (var i = 0; i < items.length; i++) {
  9.         if (items[i] != menuSelected.parentNode) {
  10.             items[i].className = "";
  11.             itemsCuerpos[i].className = "tabcontent";
  12.         } else {
  13.             menuSelected.parentNode.className = "selected";
  14.             itemsCuerpos[i].className = "tabcontentSelected";
  15.         }
  16.     }
  17. }
  18.  
  19. function iniciaMenu(tabs, cuerpos) {
  20.     var menu = document.getElementById(tabs);
  21.     var items = menu.getElementsByTagName("li");
  22.     items[0].className = "selected";
  23.     var cuerpos = document.getElementById("cuerpos");
  24.     var itemsCuerpos = cuerpos.getElementsByTagName("div");
  25.     itemsCuerpos[0].className = "tabcontentSelected";
  26. }
  27. iniciaMenu("tabsglobal", "cuerposglobal");
  28.  
  29. </script>

Código HTML: 
Ver original
  1. <body> 
  2. <!-- Tablas con contenido --> 
  3. <ul id="tabsglobal" class="menuList"> 
  4.     <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;">1ra Fase</a></li> 
  5.     <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;">2da Fase</a></li> 
  6.     <li><a href="#" onClick="muestra(this, 'tabsglobal', 'cuerposglobal');return false;">3ra Fase</a></li> 
  7. </ul> 
  8. <!-- Pestañas con resto de datos económicos --> 
  9. <div id="cuerposglobal" class="tabcontents"> 
  10. <div class="tabcontent"> 
  11.     Contenido 1.
  12. </div> 
  13. <div class="tabcontent"> 
  14.     Contenido 2.
  15. </div> 
  16. <div class="tabcontent"> 
  17.     Contenido 3. 
  18. </div> 
  19. </div> 
  20. </body>

Desde ya, muchas gracias.