Solution 1 :

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";

Solution 2 :

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>

Problem :

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>

Comments

Comment posted by Amacado

What styles are you loosing? looks good for my feeling

Comment posted by danivicario

Same here. I don’t understand what styles disappear? All three tabs look ok to me?

Comment posted by Nathan Champion

I think he @Namas is losing the text centering. The CSS justify-content and align-items aren’t used in block displays.

By

Leave a Reply

Your email address will not be published. Required fields are marked *