Ayuda con Pestañas en Html

jaits · 26 Nov 2009

mira la vdd necesito ayuda necesito krear un formulario el kual me muestre unas pestañas, en cuyas pestañas necesito introducir ciertos datos miren lo k deseo hacer es algo parecido asi como se muestra en la imagen espero y si aparezca la imagen
este es el link d la imagen no supe como subrila bien perdon x esa falla
Son dos imagenes diferentes para darse una idea de lo k kiero hacer

http://subefotos.com/ver/?451c74d1c64f3c4dd0b5062384d548eeo.jpg#codigos
http://subefotos.com/ver/?37e09e2ea44fb559cbcfb509fa0f6311o.jpg#codigos

ahi se muestra una imagen auno no soy bueno en esto asi k le hago el intento
esa es la pestaña de info especifica asi kiero k en kada pestaña me aparescan diferentes texto y cuadros de texto si son necesarios.
espero me puedan ayudar
d antemano gracias

hiei3 · 27 Nov 2009

Bueno, me pase un rato intentando hacer esto porque tambien queria aprender... seguro por ahi en internet hay un monton de ejemplos hechos pero queria ver que lograba.

Los archivos estan aqui y puedes ver el ejemplo de abajo aca y otro ejemplo aca.

pagina.html

HTML:

<link type="text/css" rel="stylesheet" href="./estilo.css">
<script language='javascript' src='./tabs.js'></script>
<div id='grupo1'>
<div id='tabs'>
<a href='#' id='cosa1'>Cosa 1</a>
<a href='#' id='cosa2'>Cosa 2</a>
<a href='#' id='cosa3'>Cosa 3</a>
</div>

<div  class='contenido' id='cosa1'>Contenido</div>
<div  class='contenido' id='cosa2'>Mas contenido</div>
<div class='contenido' id='cosa3'>Y otro mas</div>
</div>

tabs.js

HTML:

// Indicar cuales divs comienzan activos, separar por comas
var iniciales = 'cosa2';


// NO MODIFICAR NADA DE AQUI A ABAJO
function prepararLinks() {
    allLinks = document.getElementsByTagName('a');
    for(var i = 0; i < allLinks.length; i++){
        if( allLinks[i].parentNode.id == 'tabs')
            allLinks[i].onclick = function(){ mostrar(this) }
    }
}
function mostrar( link ){
    groupElement = link.parentNode.parentNode;
    id = link.id;
    // Links: cambiar clase
    links = groupElement.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++){
        if( links[i].id == id ) links[i].className = 'seleccionado';
        else links[i].className = '';
    }
    // Divs: cambiar display
    divs = groupElement.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++){
        if( divs[i].id == id ) divs[i].style.display = 'block';
        else if( divs[i].id != 'tabs') divs[i].style.display = 'none';
    }
}
function cargarIniciales(){
    divs0 = iniciales.split(',');
    for(var i = 0; i < divs0.length; i++){
        // esto asume que los links estan antes de los divs
        mostrar(document.getElementById(divs0[i]));
    }
}

window.onload = function () {
    prepararLinks();
    cargarIniciales();
}

estilo.css

HTML:

a{
    background:#ccc;
    padding:1px 5px;
    color:#036;
    text-decoration:none;
}
.contenido{
    display:none; /* Todos parten ocultos */
    border:1pt solid #ccc;
    padding:10px;
}
/* Estilo necesario */
.seleccionado{
    color:#fff;
    background:#036;
}

Bueno eso, saludos.

Hola!

Ayuda con Pestañas en Html

jaits

Becerro

hiei3

Bovino Milenario