const tbs = document.querySelector('.nav'),
tbsItem = document.querySelectorAll('.nav-item .nav-link'),
cardItm = document.querySelectorAll('.card-body'),
cardLay = document.querySelector('.card');
function dataId(){
for(let i = 0; i
tbsItem[i].setAttribute('data-id', i);
cardItm[i].setAttribute('data-id', i);
}
}
dataId();
function showHide(b){
cardItm.forEach((item)=>{
item.classList.remove('active');
if(item.getAttribute('data-id') == b){
item.classList.add('active');
}
});
}
showHide();
function whereTab(e){
let target = e.target;
if(target.className == 'nav-link'){
let attrItem = target.getAttribute('data-id');
showHide(attrItem);
}
}
tbs.addEventListener('click', whereTab);