JavaScript - dos eventos superpuestos

 
Vista:
sin imagen de perfil
Val: 41
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

dos eventos superpuestos

Publicado por ScriptShow (692 intervenciones) el 25/03/2020 13:18:48
Saludos,

probemos con algo adaptable, ampliable, compatible... Un ejemplo posible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
var d=null;
function mostrar(e) {
if (d != null) document.getElementById(d).style.visibility="hidden";
d=e;
document.getElementById(e).style.visibility="visible";
}
</script>
 
<div class="verticalMenu">
<a class="active">MENÚ EMPLEO</a>
<a href="#" onclick="mostrar('datosEmpleo');return false" id="datosPersonales">Datos personales</a>
<a href="#" onclick="mostrar('formacionEmpleo');return false" id="formacion">Formación</a>
Etc...
</div>
 
<div id="datosEmpleo" class="datosEmpleo" style="visibility:hidden">
Aqui el contenido Datos Empleo...
</div>
 
<div id="formacionEmpleo" class="formacionEmpleo" style="visibility:hidden">
Aqui el contenido Formación Empleo...
</div>

P.D.: El Style que he añadido en los DIVs, no es necesario si ya lo tienes definido en el CSS correspondiente.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar