sistema de pestañas->inicio

emr · #1 (**permalink**) 07/07/2014, 01:44

Buenos días

No tengo mucha idea de javascript, así que quizá mi duda parezca absurda. Estoy haciendo una aplicación web en la que tengo un sistema de pestañas para que el usuario se desplace entre las distintas opciones.
Una de esas opciones le permite introducir datos en una BdD, tras rellenar unos campos y pulsar un botón. Quiero que al pulsar ese botón, además de grabar en la BdD vaya a una determinada pestaña. Hago los siguiente (reconozco que es código que he cogido de Internet...y no encuentro el fallo...

)

en el head añado esto

<script type="text/javascript" src="js/tab.js"></script>

y al final de la página añado esto

<script type="text/javascript">
tab("tab_02","panel_02");
</script>

donde tab_02 es el identificador del <li> (dentro del <ul>)
y panel_02 es el identificador del <div> del contenido.

el archivo tab.js tiene el siguiente código:

function tab(pestana,panel)
{
pst = document.getElementById(pestana);
pnl = document.getElementById(panel);
psts = document.getElementById('tabs').getElementsByTagNa me('li');
pnls = document.getElementById('paneles').getElementsByTa gName('div');

// eliminamos las clases de las pestañas
for(i=0; i< psts.length; i++)
{
// Para evitar meternos en temas de dom
// hacemos que la clase sea vacío
psts[i].className = '';
}

// Añadimos la clase "actual" a la pestaña activa
pst.className = 'actual';

// ocultamos todos los paneles
for(i=0; i< pnls.length; i++)
{
pnls[i].style.display = 'none';
}

// Y mostramos el panel que nos interesa
pnl.style.display = 'block';
}

Por más que le he dado vueltas, no entiendo por qué no me funciona....:S....

Gracias

Alexis88 · #2 (**permalink**) 07/07/2014, 02:55

¿Y si colocas la línea en donde incluyes al archivo tab.js al final del documento como hiciste con la llamada a la función? Debes de saber que el código se carga de arriba hacia abajo, por lo que en tu caso carga primero el código JS y luego los elementos del DOM, entonces, el código JS no afectaría a ninguno de los elementos pues estos todavía no existen. Coloca todo el código JS justo antes de la etiqueta </body>.

Saludos

emr · #3 (**permalink**) 07/07/2014, 03:44

Gracias por la propuesta....pero sigue sin funcionar..

He probado a poner
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript">
tab("tab_04","panel_04");
</script>

y

<script type="text/javascript">
tab("tab_04","panel_04");
</script>
<script type="text/javascript" src="js/tab.js"></script>

antes de </body>....pero nada...:(

emr · #4 (**permalink**) 07/07/2014, 03:52

es más...quitando la línea <script type="text/javascript" src="js/tab.js"></script> del <head> no me funciona...

quizá no he entendido bien lo que tenía que hacer....lo siento

Alexis88 · #5 (**permalink**) 07/07/2014, 10:20

Me refiero a esto:

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
    <head>
        <meta charset = "utf-8" />
        <title>Ejemplo</title>
    </head>
    <body>
        <!-- Contenido -->
        <script type="text/javascript" src="js/tab.js"></script>
        <script type="text/javascript">
            tab("tab_04","panel_04");
        </script>
    </body>
</html>

El código JavaScript debe de ir luego del contenido de tu página para que así pueda afectarlo. Si aún así persiste el problema, pulsa la tecla F12 y en el panel que se desplegará en la parte inferior, selecciona 'Console' y vuelve a cargar la página, si hay un error, se debe de mostrar un mensaje en dicho panel (Console) que te indicará el problema.

Saludos

huertas87 · #6 (**permalink**) 07/07/2014, 10:36

Voy a asumir que hasta el momento la funcionalidad de las pestañas está. Entonces, cuando guardes la info en la base de datos, habiendo dado click en un supuesto botón guardar, lo que debes es volver a llamar la función que tienes en tab.js, con los nuevos parametros.

Código Javascript:

Ver original<button onclick="myFunction()">Guardar</button>
 
function myFunction(){
tab("tab_05","panel_05");
}