How to keep a div always active



  • I am with this example that I need you to always have an active div. It's 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>

    https://codepen.io/FabricioDev/pen/LOrEGr



  • As well as @GustavoCinque said in the comments your code can be tidy so :

    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 from me to give us a reduced one in that code I have the following:

    Changes 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 class in each button and I passed this as parameter of the new function.

    Changes 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 I will try to answer as soon as possible


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2