dos eventos superpuestos
Publicado por Alejandro (24 intervenciones) el 24/03/2020 11:26:50
Hola buenos dias,
vereis tengo dos funciones ejecutadas con el evento "onclick" en dos enlaces de un menu lateral. Estas funciones ejecutan unos div a la derecha del menu, pero cuando pulso en ambos botones muestra un div encima de otro, viendose ambos divs . Quisiera que cuando pulse en cualquiera de los botones del menu, el anterior div oculte.
A continuacion les dejo mi codigo javascript:
Aqui el codigo html
vereis tengo dos funciones ejecutadas con el evento "onclick" en dos enlaces de un menu lateral. Estas funciones ejecutan unos div a la derecha del menu, pero cuando pulso en ambos botones muestra un div encima de otro, viendose ambos divs . Quisiera que cuando pulse en cualquiera de los botones del menu, el anterior div oculte.
A continuacion les dejo mi codigo javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function mostrarDatos() {
var datosEmpleo, mostrar;
datosEmpleo = document.getElementById("datosEmpleo");
if(datosEmpleo.style.visibility == "hidden") {
datosEmpleo.style.visibility = "visible";
mostrar = document.getElementById("datosPersonales").childNodes[0];
mostrar.data = "Datos personales";
}
else {
datosEmpleo.style.visibility = "hidden";
mostrar = document.getElementById("datosPersonales").childNodes[0];
mostrar.data = "Datos personales";
}
}
function mostrarFormacion() {
var formacionEmpleo, mostrar;
formacionEmpleo = document.getElementById("formacionEmpleo");
if(formacionEmpleo.style.visibility == "hidden") {
formacionEmpleo.style.visibility = "visible";
mostrar = document.getElementById("formacion").childNodes[0];
mostrar.data = "Formación";
}
else {
formacionEmpleo.style.visibility = "hidden";
mostrar = document.getElementById("formacion").childNodes[0];
mostrar.data = "Formación";
}
}
Aqui el codigo html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="verticalMenu">
<a class="active">MENÚ EMPLEO</a>
<a href="#" onclick="mostrarDatos();return false" id="datosPersonales">Datos personales</a>
<a href="#" onclick="mostrarFormacion(); return false" id="formacion">Formación</a>
<a href="#">Ocupación</a>
<a href="#">Situacion socioeconómica</a>
<a href="#">Disponibilidad</a>
<a href="#">Servicios demandados</a>
<a href="#">Otros datos</a>
</div>
<div id="datosEmpleo" class="datosEmpleo" >
//Aqui el contenido
</div>
<div id="formacionEmpleo" class="formacionEmpleo" >
//Aqui el contenido
</div>
Valora esta pregunta


0