Как создать вкладки в JavaScript? - PullRequest
Новая
       8

Как создать вкладки в JavaScript?

0 голосов
/ 16 февраля 2019

Я пытался создавать вкладки в JavaScript.При нажатии на новую вкладку к нему должен применяться активный класс , а также отображаться связанный с ним контент панели .Однако активный класс не применяется при нажатии другой вкладки, а панели также не меняются, они просто накладываются друг на друга. 

const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel
  active.classList.remove('.active');

  for (let i = 0; i < panel.length; i++) {
    panel[i].style.display = "none";
  }


  // activate new tabs and panel
  event.target.classList.add('.active');
  let classString = event.target.innerHTML;
  console.log(classString);
  document.getElementsByClassName(classString)[0].style.display = "block";
}

tabs.addEventListener('click', onTabClick, false);
.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="tabs">
    <div class="tab active">List</div>
    <div class="tab">Grid</div>
    <div class="tab">something</div>
  </div>
  <div class="Lists panel" style='display:block'>
    panel 1 text
  </div>
  <div class="Grid panel">
    panel 2 text
  </div>
  <div class="something panel">
    panel 3 text
  </div>

</body>

</html>

1 Ответ

0 голосов
/ 16 февраля 2019

В вашем JavaScript при получении всех элементов определенного класса, document.querySelecto(".className") захватывает только первый элемент с данным классом.Чтобы получить все элементы, вам нужно будет использовать document.querySelectorAll(".className").

Затем, добавляя или удаляя класс из элемента, вы не ставите точку перед именем класса.Поэтому вместо tab[i].classList.remove(".active"); это должно быть tab[i].classList.remove("active");.

Кроме того, вместо простоты, скрывающей элементы панели, я использовал класс active, который будет применяться к вкладке, связанной с панелью.

Наконец, вы не должны использовать текст вкладки в качестве имени класса для соответствующей панели.Это может быть проблематично, если у вас есть несколько слов в тексте вкладки.Я использовал атрибут данных вкладок, чтобы указать относительный класс панели и поместить все панели в элемент div .panels.Теперь вы можете поместить любой нужный текст на вкладки и, используя атрибут data-target, разместить имя класса для панели.

JavaScript 

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }


  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}

CSS 

.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

HTML 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div class="tabs">
      <div class="tab active" data-target="Lists">Lists</div>
      <div class="tab" data-target="Grid">Grid</div>
      <div class="tab" data-target="Something">Something</div>
    </div>
    <div id="panels">
      <div class="Lists panel active">
        panel 1 text
      </div>
      <div class="Grid panel">
        panel 2 text
      </div>
      <div class="Something panel">
        panel 3 text
      </div>
    </div>

  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...