Pestañas en Web

rcrojas · #1 (**permalink**) 12/01/2004, 14:15

Como se pueden realizar las famosas pestañas en Web, se trata de lo siguiente debo hacer ingreso de datos son muchos y están debidamente agrupados por indice, entonces debo hacer el ingreso de datos a través de pestañas. Espero puedan ayudarme.

caricatos · #2 (**permalink**) 12/01/2004, 17:57

Hola rcrojas, bienvenido a los foros

:

Lo de las pestañas, es básicamente poner las pestañas usando imágenes (con esa forma...

) o algún elemento, y darle estilos a los bordes para que simulen pestañas...

Más o menos:
style="border-width: 2px; border-style: outset outset none outset; border-color: gray"

Y cada pestaña asociarla a una capa que estén ocultas, pero no con el estilo visibility, sino con display (display: none) la capa visible tiene que tener el display=block.

Espero que te sirva.

Saludos

rsalvadores · #3 (**permalink**) 13/01/2004, 12:26

Yo he hecho uno, no utilizo display, pero funciona bastante bien, la verdad no se cual es la diferencia.

http://carto.acotelsa.com/cartoPV/sg...or/objetos.htm

El aspecto real queda mejor, ya que es una ventana que abro desde una aplicación, con las dimensiones adecuadas y sin barras de herramientas.
Si modificas el tamaño de la ventana del navegador para que coincida con el contenido se ve mejor.

No sé si es lo que quieres, pero por probar ...

caricatos · #4 (**permalink**) 13/01/2004, 18:26

Hola otra vez:

Este ejemplo es con display y sin imágenes:

Código PHP:

  <html>

    <head>

        <title>

            Pestañas

        </title>

        <script language="javascript">

            function ocultarTodo()    {

                indicadores = document.getElementById("cabecera").getElementsByTagName("div");

                for (var i = 0; i < indicadores.length; i ++)

                    indicadores[i].style.display = "none";

 
            }

        </script>

    </head>

 
    <body>

        <div align=center>

            <div id="cabecera" >

                <span onclick="ocultarTodo(); document.getElementById('cuerpo1').style.display = 'block'"

                    style="background-color: #eeeeee; border-width: 2px; border-style: ridge ridge none ridge; border-color: red;">

                    Mostrar capa 1

                </span>

                &nbsp;

                <span onclick="ocultarTodo(); document.getElementById('cuerpo2').style.display = 'block'"

                    style="background-color: #dddddd; border-width: 2px; border-style: ridge ridge none ridge; border-color: blue;">

                    Mostrar capa 2

                </span>

                <div id="cuerpo1" style="width: 80%; border: 1px none red; background-color: #eeeeee; display: block;">

                    Este es el contenido de la capa 1

                    <br />

                    <br />

                    <br />

                </div>

                <div id="cuerpo2" style="width: 80%; border: 1px none blue; background-color: #dddddd; display: none;">

                    Este es el contenido de la capa 2

                    <br />

                    <br />

                    <br />

                </div>

            </div>

        </div>

    </body

</html>

Desde luego que se puede hacer mucho mejor con estilos.

Saludos

Lunita23 · #5 (**permalink**) 14/01/2009, 07:46

me habeis ayudado mucho,muchisimas gracias

Lunita23 · #6 (**permalink**) 14/01/2009, 07:47

para rsalvadores ,pincho en el enlace y me da error

caricatos · #7 (**permalink**) 14/01/2009, 08:18

Cita:

Iniciado por Lunita23

para rsalvadores ,pincho en el enlace y me da error

Hola Lunita23: No es de extrañar que falle algo ya que el mensaje es de hace 5 años (exactos)... razón por la que se cierra el mensaje... por cierto, me alegro de que el mensaje te haya ayudado.

Saludos