как оставить только активную кнопку открытой? - PullRequest
Новая
       7

как оставить только активную кнопку открытой?

0 голосов
/ 05 марта 2019

Я придумала это не очень хорошее решение для 7 кнопок и информации, появляющейся в div.Однако я бы хотел, чтобы открываемый 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>

1 Ответ

0 голосов
/ 05 марта 2019

так .. вот простой код, чтобы показать, как действовать, с небольшой частью 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>
...