document.querySelectorAll('.tab-button')[0].addEventListener('click',function(){
document.querySelector('.tab-button').classList.remove('orange')
document.querySelectorAll('.tab-button')[0].classList.add('orange')
document.querySelector('.tab-content').classList.remove('show')
document.querySelectorAll('.tab-content')[0].classList.add('show')
})
document.querySelectorAll('.tab-button')[1].addEventListener('click',function(){
document.querySelector('.tab-button').classList.remove('orange')
document.querySelectorAll('.tab-button')[1].classList.add('orange')
document.querySelector('.tab-content').classList.remove('show')
document.querySelectorAll('.tab-content')[1].classList.add('show')
})
document.querySelectorAll('.tab-button')[2].addEventListener('click',function(){
document.querySelector('.tab-button').classList.remove('orange')
document.querySelectorAll('.tab-button')[2].classList.add('orange')
document.querySelector('.tab-content').classList.remove('show')
document.querySelectorAll('.tab-content')[2].classList.add('show')
})
$('.tab-button').eq(0).on('click',function () {
$('.tab-button').removeClass('orange')
$('.tab-button').eq(0).addClass('orange')
$('.tab-content').removeClass('show')
$('.tab-content').eq(0).addClass('show')
})
$('.tab-button').eq(1).on('click',function () {
$('.tab-button').removeClass('orange')
$('.tab-button').eq(1).addClass('orange')
$('.tab-content').removeClass('show')
$('.tab-content').eq(1).addClass('show')
})
$('.tab-button').eq(2).on('click',function () {
$('.tab-button').removeClass('orange')
$('.tab-button').eq(2).addClass('orange')
$('.tab-content').removeClass('show')
$('.tab-content').eq(2).addClass('show')
})
제이쿼리로 하면 잘 되는데
자바스크립트로 짜놓으니깐 안되네요
이유를 알고싶습니다.
