Estou tentando esconder uma div
com o JavaScript.
Só que os botões não estão ativando nada e só estão escondendo tudo. Aliás, não está nem mesmo ativando a interatividade dos botões.
A ideia principal é que quando clicar a letra A
aparece a tabela A, escondendo as demais. E quando clicar na letra B
, esconde a A
.
Exemplo abaixo (código completo em https://jsfiddle.net/Larck6/3vpmnx2r/1/):
var div1;
var div2;
window.onload = function(){
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
var bt1 = document.getElementById("bt1");
bt1.onclick = mostrarDiv1;
var bt2 = document.getElementById("bt2");
bt2.onclick = mostrarDiv2;
div1.classList.add ("escondido");
div2.classList.add ("escondido");
}
function mostrarDiv1(){
div1.classList.remove("escondido");
div1.classList.add("escondido");
}
function mostrarDiv2(){
div1.classList.add("escondido");
div1.classList.remove("escondido");
}
.escondido{
display:none;
}
.botao{
height:auto;
width:100%;
float: left;
text-align:center;
margin-top:15%;
color: #c40027;
font-weight: bold;
z-index:2;
}
<div class="container">
<div class="fundo">
<div class="cabecalho">
<div class="logo"><img src="img/Logo%20Preta%20RCM.png"/></div>
<div class="titulo">ESTOQUE BOBINAS</div>
<div class="logo2"> <img src="img/png%20logo%20vermelha.png"></div>
</div>
<!-- >>>>>>>>> botao <<<<<<<<< -->
<div class="botao">
<button id="bt1"> A </button>
<button id="bt2"> B </button>
<button id="bt3"> C </button>
<button id="bt4"> E </button>
<button id="bt5"> F </button>
<button id="bt6"> G </button>
<button id="bt7"> H </button>
<button id="bt8"> I </button>
<button id="bt9"> J </button>
<button id="bt10"> Z </button>
</div>
<!-- >>>>>>> FIM botao <<<<< -->
<div id="div1">
<!-- >>>>Tabela completa A<<<< -->
<div class="pratileira_a"><h3>Prateileira A</h3></div>
<div class="parte1">
<div class="partileiraandar">
<div class="andar">Andares</div>
<div class="andar_p">Andar 0</div>
<div class="andar_p">Andar 1</div>
<div class="andar_p">Andar 2</div>
<div class="andar_p">Andar 3</div>
</div>
<!-- FIM 1 a 8 da -->
<div class="abc_dados_prateleiras">
<div class="p_l">1</div>
<div class="p_l">2</div>
<div class="p_l">3</div>
<div class="p_l">4</div>
<div class="p_l">5</div>
<div class="p_l">6</div>
<div class="p_l">7</div>
<div class="p_l">8</div>
</div>
<!-- FIM 1 a 8 da -->
<!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
<div class="dados_pratileira_1">
<div id="andar0_1">256 aqui tem um texto muito grande</div>
<div id="andar0_2">265</div>
<div id="andar0_3">285</div>
<div id="andar0_4">256</div>
<div id="andar0_5">259</div>
<div id="andar0_6">285</div>
<div id="andar0_7">259</div>
<div id="andar0_8">285</div>
<!-- andar 1 -->
<div id="andar1_1">256 aqui tem um texto muito grande</div>
<div id="andar1_2">265</div>
<div id="andar1_3">285</div>
<div id="andar1_4">256</div>
<div id="andar1_5">259</div>
<div id="andar1_6">285</div>
<div id="andar1_7">259</div>
<div id="andar1_8">285</div>
<!-- andar 2 -->
<div id="andar2_1">256 aqui tem um texto muito grande</div>
<div id="andar2_2">265</div>
<div id="andar2_3">285</div>
<div id="andar2_4">256</div>
<div id="andar2_5">259</div>
<div id="andar2_6">285</div>
<div id="andar2_7">259</div>
<div id="andar2_8">285</div>
<!-- andar 3 -->
<div id="andar3_1">256 aqui tem um texto muito grande</div>
<div id="andar3_2">265</div>
<div id="andar3_3">285</div>
<div id="andar3_4">256</div>
<div id="andar3_5">259</div>
<div id="andar3_6">285</div>
<div id="andar3_7">259</div>
<div id="andar3_8">285</div>
<!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->
</div>
</div>
<!-- >>>> FIM Tabela completa A <<<< -->
</div> <!-- >>>> FIM da DIV1 do botao 1 <<<< -->
<div id="div2">
<h1> TESTE </h1>
</div>