如何仅使活动按钮保持打开状态？

Question

我想出了一个不是很好的解决方案，因为它在div中显示了7个按钮和信息。 但是，我希望在单击新按钮时关闭div。 我的解决方案也是非常重复的。

javascript代码...冗长的解决方案，用于通过每个按钮访问每个div ...单独工作

 function myRoot() { var x = document.getElementById("root"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function mySacral() { var x = document.getElementById("sacral"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function mySolar() { var x = document.getElementById("solar"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function myHeart() { var x = document.getElementById("heart"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function myThroat() { var x = document.getElementById("throat"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function myBrow() { var x = document.getElementById("brow"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } function myCrown() { var x = document.getElementById("crown"); if (x.style.display !== "block") { x.style.display = "block"; } else { x.style.display = "none"; } } 

 <script src="Myscript.js"></script> <div class="chakra"> <button class="chbtn" onclick="myRoot()"><img src="Images/root.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="mySacral()"><img src="Images/sacral.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="mySolar()"><img src="Images/solar.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="myHeart()"><img src="Images/heart.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="myThroat()"><img src="Images/throat.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="myBrow()"><img src="Images/brow.png"></button> </div> <div class="chakra"> <button class="chbtn" onclick="myCrown()"><img src="Images/crown.png"></button> </div> </div> <div class="pic-holder"> <h3>Chakra information</h3> <div class="info" id="root"><img src="Images/root.png"> The root Chakra</br> <p>Lorem </p> <p>Lorem ipsum, dolor sit </p> </div> <div class="info" id="sacral"><img src="Images/sacral.png"> The sacral Chakra</br> <p>Lorem blah blahipsum blah blah</p> </div> 

Answer 1

所以..这是一个简单的代码，用一个小的css部分显示了如何进行

 var Elm_Id_Block = '', elms_xx = document.querySelectorAll('#elmsGroup > div') ; // init elms_xx[0].style.display = "block"; Elm_Id_Block = elms_xx[0].id; document.querySelector("#buttonsGroup").onclick = function (e) { if (!e.target.matches('button')) return; e.stopPropagation(); let ref = e.target.dataset.ref; if (ref != Elm_Id_Block) { document.getElementById(ref).style.display = "block"; document.getElementById(Elm_Id_Block).style.display = "none"; Elm_Id_Block = ref; } } 

  #elmsGroup>div { display: none; width: 300px; height: 30px; padding: 5px; border: 1px solid lightblue; margin: 5px; } 

 <div id="buttonsGroup"> <button data-ref="elm-A">A</button> <button data-ref="elm-B">B</button> <button data-ref="elm-C">C</button> <button data-ref="elm-D">D</button> <button data-ref="elm-E">E</button> </div> <div id="elmsGroup"> <div id="elm-A"> elm-A </div> <div id="elm-B"> elm-B </div> <div id="elm-C"> elm-C </div> <div id="elm-D"> elm-D </div> <div id="elm-E"> elm-E </div> </div>