Foros del Web » Programando para Internet » Javascript »

Navegación con pestañas

Estas en el tema de Navegación con pestañas en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/03/2010, 12:01
Avatar de canzoneta  
Fecha de Ingreso: diciembre-2003
Ubicación: Mendoza
Mensajes: 79
Antigüedad: 19 años, 1 mes
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.

Etiquetas: css, html, pestaña
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:02.