const ulItems = Array.from(document.querySelector('#ulId').children)
const divItems = Array.from(document.querySelector('#divId').children)
const moveMenu = document.querySelector('#moveMenu')
const menu = document.querySelector('#menu')

moveMenu.addEventListener('click', () => {
  showMenu(true)
})

function showMenu(show) {
  if (show) {
    menu.classList.add('moveMenuContent')
  } else {
    menu.classList.remove('moveMenuContent')
  }
}

//li点击事件
function showItem(e) {
  ulItems.forEach((item) => {
    item.classList.remove('liActive')
  })
  e.target.classList.add('liActive')
  divItems.forEach((item) => {
    item.style.display = 'none'
  })
  divItems[e.target.getAttribute('data-id') - 1].style.display = 'block'
}

//为每一个li添加点击事件
ulItems.forEach((item) => {
  item.addEventListener('click', showItem)
})

//当点击菜单是跳转至对应的单页应用
function menuClick(e) {
  if (e.target.getAttribute('data-route')) {
    window.location.href = e.target.getAttribute('data-route')
  }
}