1

Estou com esse exemplo que eu preciso que tenha sempre uma div ativa. Dá forma que está é posível desabilitar as três.

<!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

1
  • 1
    Retire o x.style.display = "none" do else da função myFunctionX, o y.style.display = "none" do else da função myFunctionY e o z.style.display = "none" do else da função myFunctionZ. Não vou elaborar resposta por que estou com pressa, alguém o fará. Commented 23/11/2017 às 20:27

3 Respostas 3

1

Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código.

Pode refatorar o código um pouco utilizando um array para os <div> a mostrar/esconder e para cada click esconder todos os <div> e de seguida mostrar o que foi clicado.

Exemplo:

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>

Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo onclick em cada um dos botões.

6
  • Olá. Na linha abaixo vc inicia todos como escondido. Preciso que o primeiro inicie habilitado. Como eu faço isso? divs.forEach(div => div.style.display = "none"); //iniciar todos escondidos Commented 28/11/2017 às 13:32
  • 1
    @fabricio_wm Pode fazer assim: divs.forEach(div => div.style.display = "none"); divs[0].style.display="block";
    – Isac
    Commented 28/11/2017 às 13:42
  • Estou usando cakePHP e eu uso lista. Testei seu exemplo no Codepen e está funcionando. Agora eu preciso fazer funcionar por lista. Sabe com resolver isso? Devo finalizar e abrir outra pergunta? Commented 28/11/2017 às 14:24
  • @fabricio_wm "Por lista" como assim ? Pode elaborar um pouco? Provavelmente será melhor abrir uma nova, mas tente só explicar um pouco para lhe poder dar uma opinião mais concreta
    – Isac
    Commented 28/11/2017 às 15:14
  • 1
    @fabricio_wm Esse exemplo só tem JS. Coloque um exemplo simplificado no pastebin com o que está a tentar fazer
    – Isac
    Commented 30/11/2017 às 13:53
1

Bem como o @GustavoCinque disse nos comentários o seu código pode ser arrumado assim :

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

Mas como uma sugestão minha para darmos uma reduzida nesse código tenho o seguinte :

Alterações no 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>

Eu adicionei uma class em cada button e passei o this como parametro da nova função.

Alterações no 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;
    }

}

Se tiver alguma duvida só deixar no comentário que eu tentarei responder o mais breve possivel

0

Atribua a mesma classe para as 3, e sempre que você for ativar uma adicione uma classe "active", já inicie a aplicação com 1 div com essa classe. Assim quando você for disparar o evento você verifica se possui alguma div com a class "active", caso exista e não seja ela mesmo segue o processo, caso contrario retorne "false"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .