How to keep an always active div

Question

How to keep an always active div

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have this example that I need to always have an active div. It is possible that it is possible to disable all three.

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<nav class="columns" id="actions-sidebar">
    <ul class="side-nav">    
        <li><?= $this->Html->link('> '.__('Student Data'),'javascript:myFunctionX()', ['style' => $dataButton]) ?></li>
        <li><?= $this->Html->link('> '.'Trabalho', 'javascript:myFunctionY()', ['style' => $matriculaButton]); ?></li>
        <li><?= $this->Html->link('> '.'Referências','javascript:myFunctionZ()', ['style' => $matriculaButton]) ?></li>
    </ul>
</nav>

<div id="myDIV">
This is my DIV element.
</div>
<div id="myDIV2">
This is my DIV element.
</div>
<div id="myDIV3">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunctionX() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "none";

    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";
    }


}
function myFunctionY() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

  if (y.style.display === "none") {
        x.style.display = "none";
        y.style.display = "block";
        z.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunctionZ() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

  if (z.style.display === "none") {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "block";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";
    }
}
</script>

</body>
</html>

link

javascript

asked by anonymous 23.11.2017 / 21:14

3 answers

1

As well as @GustavoCinque said in the comments your code can be arranged like this:

function myFunctionX() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "none";

    } else {
        y.style.display = "none";
        z.style.display = "none";
    }


}
function myFunctionY() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

  if (y.style.display === "none") {
        x.style.display = "none";
        y.style.display = "block";
        z.style.display = "none";
    } else {
        x.style.display = "none";
        z.style.display = "none";
    }
}

function myFunctionZ() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

  if (z.style.display === "none") {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "block";
    } else {
        x.style.display = "none";
        y.style.display = "none";
    }
}

But as a suggestion of mine to give a reduced in this code I have the following:

Changes to HTML

<button class="x" onclick="myFunction(this)">Botão 1</button>
<button class="y" onclick="myFunction(this)">Botão 2</button>
<button class="z" onclick="myFunction(this)">Botão 3</button>

I added a% w of% to each% w and% w% w as the new function's parameter.

Changes to JavaScript

//Eu troquei, invés de ter 3 funções uma para cada botão tem apenas 1
function myFunction(el) { 
    // "el" é o elemento que aciona a função 

    var my_class = el.className; 
    // my_class é a classe identificadora que eu tinha criado para essa nova função

    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIV2");   
    var z = document.getElementById("myDIV3");

    // nesse switch vou verificar qual a class do "el" e assim determinar qual div deve aparecer
    switch (my_class) {

        case "myDIV":
            x.style.display = "block";
            y.style.display = "none";
            z.style.display = "none";
            break;

        case "myDIV2":
            x.style.display = "none";
            y.style.display = "block";
            z.style.display = "none";
            break;

        case "myDIV3":
            x.style.display = "none";
            y.style.display = "none";
            z.style.display = "block";
            break;

        default:
            break;
    }

}

If you have any questions just leave in the comment that I will try to respond as soon as possible

23.11.2017 / 21:40

0

Assign the same class to the 3, and whenever you activate an add an active class, already start the application with 1 div with this class. So when you are going to fire the event you check if you have any div with the class "active", if it exists and it is not itself follow the process, otherwise return "false"

23.11.2017 / 21:29

Error converting a data from one class to another How can I access the database directly from my model class in an ASP.NET Core project?

score 1 · Accepted Answer

Whenever you have a lot of code repeated it means you are not doing things the best way and you end up making it harder when you need to change or keep the code.

You can refactor the code a bit by using an array for <div> to show / hide and for each click hide all <div> and then show what was clicked.

Example:

const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')];
const botoes = [...document.querySelectorAll("button")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(div => div.style.display = "none"); //esconder todos os divs
    divs[i].style.display = "block"; //mostrar o que foi clicado
  }); 
}

divs.forEach(div => div.style.display = "none"); //iniciar todos escondidos

#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>

<div id="myDIV">This is my DIV element.</div>
<div id="myDIV2">This is my DIV element.</div>
<div id="myDIV3">This is my DIV element.</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

</body>
</html>

Since it assigns the click event directly to javascript it has become unnecessary to have the onclick attribute on each of the buttons.