1

Tengo el siguiente código que según la tab que se escoja sale una opción u otra en este caso son diferentes formularios.

const tabLink=document.querySelectorAll('.tab-link');
const formularios=document.querySelectorAll('.formulario');

for (let x = 0; x < tabLink.length; x++) {
    
    tabLink[x].addEventListener('click',()=>{

        //removemos la clase active de todos los tabs encotrados
        tabLink.forEach((tab)=> tab.classList.remove('active'));

        //le agregamos la clase active al tab que se le hizo click
        tabLink[x].classList.add('active');

        //mostramos el formulario correspondiente
        //para los formularios funciona exactamente los mismo que los tabs
        formularios.forEach((formu)=>formu.classList.remove('active'));
        formularios[x].classList.add('active');
       
    })
}

Primero lo he ejecutado en un script solo con los formularios y si que funciona. Pero al insertarlo en mi aplicación no funciona. He intentado poner el código en una función, pero luego no se de donde llamarla. El menú de tabs que tengo es el siguiente:

<ul class="tabs-links">
   <li class="tab-link active">Paciente</li>
   <li class="tab-link ">Cuidador</li>
   <li class="tab-link ">Personal</li>
</ul>
<form action="" method="POST" id="formPac" class="formulario active">
                        
     <input type ="text" id ="nombreP" name ="nombreP" placeholder="Nombre" class="input-text" autocomplete="off">
     <input type ="text" id ="apellidosP" name ="apellidosP" placeholder="Apellidos" class="input-text"  autocomplete="off">
     <input type ="text" id = "loginP" name = "loginP" placeholder="Usuario" class="input-text" autocomplete="off">
</form>
<form action="" method="POST" id="formPac" class="formulario">
                        
     <input type ="text" id ="nombreP" name ="nombreP" placeholder="Nombre" class="input-text" autocomplete="off">
     <input type ="text" id ="apellidosP" name ="apellidosP" placeholder="Apellidos" class="input-text"  autocomplete="off">
     <input type ="text" id = "loginP" name = "loginP" placeholder="Usuario" class="input-text" autocomplete="off">
</form>
<form action="" method="POST" id="formPac" class="formulario">
                        
     <input type ="text" id ="nombreP" name ="nombreP" placeholder="Nombre" class="input-text" autocomplete="off">
     <input type ="text" id ="apellidosP" name ="apellidosP" placeholder="Apellidos" class="input-text"  autocomplete="off">
     <input type ="text" id = "loginP" name = "loginP" placeholder="Usuario" class="input-text" autocomplete="off">
</form>

No se porque me funciona en los scripts pero en la aplicación no, es exactamente el mismo código.

1
  • Probablemente ejecutas el script antes de que se haya creado el HTML y solo necesitas moverlo al final del documento. En todo caso, revisa la consola para saber cuál es exactamente el error.
    – Triby
    Commented el 11 jul. 2022 a las 14:44

1 respuesta 1

0

te recomiendo meter en el bloque

 $(document).ready(function () {  }

el código javascript para que se ejecute una vez el documento html fue creado tal que así:

$(document).ready(function () { 
const tabLink=document.querySelectorAll('.tab-link');
const formularios=document.querySelectorAll('.formulario');

for (let x = 0; x < tabLink.length; x++) {
    
    tabLink[x].addEventListener('click',()=>{

        //removemos la clase active de todos los tabs encotrados
        tabLink.forEach((tab)=> tab.classList.remove('active'));

        //le agregamos la clase active al tab que se le hizo click
        tabLink[x].classList.add('active');

        //mostramos el formulario correspondiente
        //para los formularios funciona exactamente los mismo que los tabs
        formularios.forEach((formu)=>formu.classList.remove('active'));
        formularios[x].classList.add('active');
       
    })
}}
1
  • Sería conveniente que expliques que ese bloque requiere jQuery y, de paso, incluir la opción con Javascript puro.
    – Triby
    Commented el 11 jul. 2022 a las 19:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.