选项卡按钮问题。想介绍将显示所有横幅的新标签

Question

在网站上，我有按钮“全部”、“研讨会”、“网络研讨会”和“会议”。我想通过按按钮对与主题相关的横幅进行排序。到目前为止，通过使用脚本，例如，如果我按下“研讨会”按钮，它只会显示研讨会。

我想改变它的方式，如果我按下按钮“全部”。所有研讨会、网络研讨会和会议横幅都应该出现。

我现在的JS代码是：

//*** Tabs

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.format__button').forEach( function(tabBtn) {
    tabBtn.addEventListener('click', function(event) {
      const path = event.currentTarget.dataset.path

      document.querySelectorAll('.test__item',).forEach( function(tabContent) {
        tabContent.classList.remove('block-active')
      })
      document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
        tabsTarget.classList.add('block-active')
      })
    })
  })

  //*** tabs active
  let tabsChange = document.querySelectorAll('.format__button')

  tabsChange.forEach(button => {
    button.addEventListener('click', function () {
      tabsChange.forEach(btn => btn.classList.remove('active__tab'))
      this.classList.add('active__tab')
    })
  })
})

html 中的按钮代码：

<ul class="format__list">
            <li class="format__item">
              <button class="format__button" data-path="all">All</button>
            </li>
            <li class="format__item">
              <button class="format__button active__tab" data-path="seminar">Seminars</button>
            </li>
            <li class="format__item">
              <button class="format__button" data-path="vebinar">webinars</button>
            </li>
            <li class="format__item">
              <button class="format__button" data-path="conference">conferences</button>
            </li>
          </ul>

html 中的横幅代码：


ul class="test__list">
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item" data-target="conference">
              conference
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item" data-target="conference">
              conference
            </li>
          </ul>

css

中的代码

.test__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 200px 0;
}

.test__item {
  text-align: center;
  width: 500px;
  height: 400px;
  background-color:var(--Medex);
  font-size: 30px;
  color: white;
  font-weight: bolder;
  display: none;
}

.test__item:not(:last-child) {
  margin-bottom: 20px;
}

.test__item.block-active {
  display: block;
}

Answer 1

您只需为 'all' 数据集添加一条 if/else 语句：

if(path === 'all')
    document.querySelectorAll('.test__item',).forEach( function(tabContent) {
        tabContent.classList.add('block-active')
    })
else
    document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
        tabsTarget.classList.add('block-active')
    })

此外，我必须将字体颜色从白色更改为能够看到文本。

Demo

选项卡按钮问题。想介绍将显示所有横幅的新标签

Tabs buttons problems. Would like to introduce new tab that will show all banners

html

javascript

css

tabs

script