Tengo dos div que quiero mostrar u ocultar (uno oculto otro mostrado) si hacemos click en cualquiera de varios botones agrupados en una clase. Es decir, al hacer click en .enlaces debe cambiar el display de uno a "flex" y de otro a "none" y al hacer click de nuevo en .enlaces debe hacer la operación contraria (cambiar el display de uno a "none" y de otro a "flex"). Hasta aquí bien. Mi problema es que al hacer click por primera vez funciona pero ya no vuelve a hacer caso al evento.
var links = document.getElementsByClassName('enlaces');
for(var i = 0; i < links.length; i++){
var cuatro = document.getElementById("cuatro");
var tres = document.getElementById("tres");
links[i].addEventListener('click', function(){
if(tres.style.display = "flex"){
tres.style.display = "none";
cuatro.style.display = "flex";
}else{
tres.style.display = "flex";
cuatro.style.display = "none";
}
})
}
*{
box-sizing: border-box;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body{
font-family: 'Raleway', sans-serif;
}
header nav{
background-color:#262626;
}
header ul{
list-style: none;
display: flex;
justify-content: space-around;
margin: 0 auto;
padding: 0.5%;
width: 30%;
}
header li{
color: white;
text-transform: capitalize;
}
.enlaces{
text-decoration: none;
}
header img{
width: 100vw;
position: relative;
}
#absolute{
width: 60%;
padding: 1%;
position: absolute;
top: 30%;
left: 20%;
background-color: #3D3D3D;
opacity: 0.7;
border: 2px solid white;
border-radius: 5px;
text-align: center;
color: white;
}
hr{
border: 2px solid #262626;
background-color:#262626;
min-height: 10px;
}
#tres, #cuatro{
display: flex;
justify-content: space-around;
margin: 2%;
}
#tres div, #cuatro div{
width: 19.1%;
}
#tres h4, #cuatro h4{
text-transform: capitalize;
margin: 3% 0 3% 0;
}
#cuatro{
display: none;
}
footer{
background-color: #262626;
color: white;
text-align: center;
}
footer p{
padding: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway:400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<nav>
<ul>
<a class="enlaces" href="#">
<li>home</li>
</a>
<a class="enlaces" href="#">
<li>foo</li>
</a>
<a class="enlaces" href="#">
<li>blar</li>
</a>
<a class="enlaces" href="#">
<li>sudo</li>
</a>
<a class="enlaces" href="#">
<li>testimonials</li>
</a>
<a class="enlaces" href="#">
<li>contact</li>
</a>
</ul>
</nav>
<img src="img/ancha.jpg" alt="cabecera">
<div id="absolute">
<h3>Hello World</h3>
<p>- A blurlb about life would go well here -</p>
</div>
</header>
<hr>
<section id="tres">
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
</section>
<section id="cuatro">
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
<div>
<img src="img/350x90.png" alt="">
<h4>header</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab dolorum a esse distinctio perferendis, iusto omnis cum eligendi architecto libero dolorem in recusandae odio nisi mollitia facere provident possimus aut.</p>
</div>
</section>
<footer>
<p>Made for you by Alvaro Torres</p>
</footer>
</body>
</html>
Como siempre, mil gracias
=
para poder comparar,if(tres.style.display == "flex")
. Y al principiotres.style.display
es""
.display:flex
mediante el selector deID
, no se lo pones directamente al elemento, estas creando una regla css. Entonces si hacesdocument.getElementById("tres").style.display
te devolvera""
(que implica que tiene el display de esa regla). Después del primer click, elflex
se lo pones directamente al elemento (en el else) por lo que la comparativa si que estrue
y se cambian los displays. Para resolver esto puedes ponerle directamente elstyle
en la etiqueta html, o tambien puedes hacer la comparativa con==""
y en el elsetres.style.display = ""