Блог

На веб-сайте у меня есть кнопки «все», «семинары», «вебинары» и «конференции». Я хотел бы отсортировать баннеры по темам, нажимая кнопки. Пока с помощью скрипта, если, например, я нажму кнопку «семинары», он покажет мне только семинар.

Я хотел бы изменить ее таким образом, чтобы при нажатии кнопки «все». Должны отображаться баннеры всех семинаров, вебинаров и конференций.

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;
}
 

Вам просто нужно добавить оператор 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')
    })
 

кроме того, мне пришлось изменить цвет шрифта с белого, чтобы иметь возможность видеть тексты.

ДЕМОНСТРАЦИЯ