for(let i = 0; i<tab.length; i++){
tab[i].addEventListener('click', (e) => {
e.preventDefault();
for(let j=0; j<tab.length; j++){
tab[j].classList.remove('active')//전체 엑티브지우기
}
tab[i].classList.add('active')//클릭된것만 엑티브살리기
})
}
내용부분도 그안에 넣으면되는듯
tabs = document.querySelectorAll('.tabs__item')
tabs_section = document.querySelectorAll('.tabs__section')
for(let i = 0; i<tabs.length; i++){
tabs[i].addEventListener('click',(e)=>{
//e.preventDefault()
for(let j = 0; j<tabs.length; j++){
tabs[j].classList.remove('active')
tabs_section[j].style.display = 'none'
}
tabs[i].classList.add('active')
tabs_section[i].style.display = 'block'
})
}
탭하나만빼고 전부 display:none처리한뒤에 클릭된것만 display:block처리
반응형
'Frontend > Markup' 카테고리의 다른 글
google icon (0) | 2022.10.28 |
---|---|
에러처리(dom, 객체) (0) | 2022.08.30 |
nextjs viewport (0) | 2022.05.24 |
a태그 확장시 block 안먹힐때 (0) | 2021.11.09 |
disabled 에서 readonly로 사용한 이유 (0) | 2021.10.15 |