Tabs选项卡点击all按钮展示全部分类横幅功能改造求助

解决方案 #

只需要修改原JS代码中点击按钮后的筛选逻辑，增加对all分类的特殊判断即可，修改后的完整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')
      })
      // 特殊处理全部分类
      if (path === 'all') {
        // 给所有横幅添加激活状态
        document.querySelectorAll('.test__item').forEach( function(tabsTarget) {
          tabsTarget.classList.add('block-active')
        })
      } else {
        // 原有单分类筛选逻辑保持不变
        document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
          tabsTarget.classList.add('block-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')
    })
  })
})

内容的提问来源于stack exchange，提问作者Vladislav