Как мне переключить отображение div? - PullRequest
Новая
       44

Как мне переключить отображение div?

0 голосов
/ 29 марта 2020

Я пробовал это: https://jsfiddle.net/eu30mcps/, но это не работает. Как я могу отобразить первый div, когда я нажму на первую кнопку ... и так далее? 

function DisplayKat1() {
  var x = document.getElementById("kat1");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function DisplayKat2() {
  var x = document.getElementById("kat2");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function DisplayKat3() {
  var x = document.getElementById("kat3");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<p>
    <button class="btn default" onklick="DisplayKat1()">A</button>
    <button class="btn default" onklick="DisplayKat2()">B</button>
    <button class="btn default" onklick="DisplayKat3()">C</button>
</p>


<div id="kat1">
    Text A
</div>

<div id="kat2">
    Text B
</div>

<div id="kat3">
    Text C
</div>

Ответы [ 3 ]

1 голос
/ 29 марта 2020

Я бы посоветовал немного более простой подход. Определите новый css класс с именем hidden: 

.hidden {
  display: none;
}

. Имейте только одну функцию, которая добавляет класс hidden к каждому из ваших kat s (получите id kat из обработчиков событий). 

function hideKat(katId) {
 var kat = document.getElementById(katId);
 kat.classList.toggle('hidden');
}

Замените ваши обработчики onclick новыми: 

<p>
<button class="btn default" onclick="hideKat('kat1')">A</button>
<button class="btn default" onclick="hideKat('kat2')">B</button>
<button class="btn default" onclick="hideKat('kat3')">C</button>
</p>


<div id="kat1">
Text A
</div>

<div id="kat2">
Text B
</div>

<div id="kat3">
Text C
</div>

PS: у вас в опечатках кнопок: onklick -> onclick

0 голосов
/ 29 марта 2020

Нет события под названием klick, вы, вероятно, имели в виду onclick.

0 голосов
/ 29 марта 2020

Для этого вам просто нужно изменить структуру HTML. Добавьте data-target, указывающее значение divs id. Вот оно - 

const btns = [...document.querySelectorAll('.btn')];

btns.forEach(el => {
  el.addEventListener('click', function(e) {
    const div = document.querySelector(e.target.dataset.target);
    if (div) {
      if (div.style.display === 'block') {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
  });
})
#kat1,
#kat2,
#kat3 {
  display: none;
  /* You can make the display block initially. It's up to you */
}
<p>
  <button class="btn default" data-target="#kat1">A</button>
  <button class="btn default" data-target="#kat2">B</button>
  <button class="btn default" data-target="#kat3">C</button>
</p>


<div id="kat1">Text A</div>
<div id="kat2">Text B</div>
<div id="kat3">Text C</div>
...