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.