原生js实现的响应式Tab选项卡切换特效代码

使用方法

const doc = document
const tabsPanels = [...doc.querySelectorAll('.tabs-panel')]
const navLinks = [...doc.querySelectorAll('.nav-link')]

function hideTabsPanels() {
  tabsPanels.forEach(panel => {
    panel.style.display = 'none'
  })
}

const activeClassName = 'nav-link--active'

function removeActiveStyle() {
  navLinks.forEach(link => {
    link.classList.remove(activeClassName)
  })
}

function addActiveStyle(el) {
  el.classList.add(activeClassName)
}

hideTabsPanels()

const hash = window.location.hash

if (hash) {
  const panelName = hash.slice(1)
  doc.getElementById(panelName).style.display = ''
  addActiveStyle(doc.querySelector('[href="#' + panelName + '"]'))
} else {
  tabsPanels[0].style.display = ''
  addActiveStyle(doc.querySelector('.nav-link'))
}

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    const panelName = this.href.slice(this.href.indexOf('#') + 1)
    hideTabsPanels()
    doc.getElementById(panelName).style.display = ''
    removeActiveStyle()
    addActiveStyle(this)
  })
})

window.addEventListener('hashchange', function() {
  hideTabsPanels()
  const panelName = window.location.hash.slice(1)
  doc.getElementById(panelName).style.display = ''
  removeActiveStyle()
  addActiveStyle(doc.querySelector('[href="#' + panelName + '"]'))
})