It looks like initially your cont class DIVs are set as display: flex but when making them visible again in JavaScript you set them as display: block.
You should change the JavaScript to something like this:
document.getElementById(contenedor).style.display = "flex";
Avoid manipulating styles in JS. Toggle a class and leave the styles to the CSS:
function toggleMe(e, contenedor) {
for (let item of document.querySelectorAll(".cont")) {
item.classList.toggle("active", item.id === contenedor);
}
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
.cont.active {
display: flex;
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>I’m trying to learn JavaScript + html + css and Python by myself and I’m practicing with a tab layout using divs with p elements inside working as a tab (I know that I can do it with buttons, but I’m proving myself that it can be done with p)
I made JavaScript code to when is clicked the div of every tab in the layout came upfront a div with content related to that tab, but when I click it, lost every style that I made in an external CSS stylesheet and I don’t know the reason for that.
This is the html
function toggleMe(e, contenedor) {
var a = document.getElementsByClassName("cont");
var i;
for(i=0;i<a.length;i++) {
a[i].style.display = "none";
}
document.getElementById(contenedor).style.display = "block";
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>What styles are you loosing? looks good for my feeling
Same here. I don’t understand what styles disappear? All three tabs look ok to me?
I think he @Namas is losing the text centering. The CSS justify-content and align-items aren’t used in block displays.