[miniProjects] 38_Mobile Tab Navigation

38_Mobile Tab Navigation

💻주제 : 모바일 탭바를 클릭시 이미지가 바뀜

✨JS

const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        hideAllContents()
        hideAllItems()

        item.classList.add('active')
        contents[idx].classList.add('show')
    })
})

function hideAllContents() {
    contents.forEach(content => content.classList.remove('show'))
}

function hideAllItems() {
    listItems.forEach(item => item.classList.remove('active'))
}

• listItems.forEach((item, idx) => { ... })
  listItems에 대해 반복문을 실행한다.
  item은 각각의 <li> 요소를 의미하고, idx는 현재 요소의 인덱스다.

• item.addEventListener('click', () => { ... })

😶hideAllContents()

모든 contents 요소를 숨기는 함수인 hideAllContents()를 호출한다.

hideAllContents() 함수는 contents 배열에 대해 반복문을 실행하여 각 요소의 "show" 클래스를 제거한다.

😶hideAllItems()

모든 listItems 요소를 숨기는 함수인 hideAllItems()를 호출한다.

hideAllItems() 함수는 listItems 배열에 대해 반복문을 실행하여 각 요소의 "active" 클래스를 제거합니다.

• item.classList.add('active')
  현재 클릭된 <li> 요소에 "active" 클래스를 추가한다.

• contents[idx].classList.add('show')
  contents 배열에서 idx에 해당하는 인덱스의 요소에 "show" 클래스를 추가한다.