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>
x.style.display = "none"
doelse
da funçãomyFunctionX
, oy.style.display = "none"
doelse
da funçãomyFunctionY
e oz.style.display = "none"
doelse
da funçãomyFunctionZ
. Não vou elaborar resposta por que estou com pressa, alguém o fará.