There are tabs on the page when you click on which content opens. tabs were made on Bootstrap5 (this is what the customer wanted). But the problem is that the tabs are in different places.
Some in the header, others in the main and their windows should open in the middle of the page, and so that the top ones do not interfere with the bottom ones, you need to click on the top ones so that the class at the bottom ones is removed and vice versa.
Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at HTMLAnchorElement. (file:///C:/Desktop/webLocale(application)/script.js:70:25)
It appears only when i tab on element with class ".nav-link"
const linkItem = document.querySelectorAll('.nav-item__link'),
navLink = document.querySelectorAll('.nav-link'),
tab = document.querySelectorAll('.tab-pane');
for (let i = 0; i < linkItem.length; i++) {
linkItem[i].addEventListener('click', function(e) {
e.preventDefault();
for (let x = 0; x < linkItem.length; x++) {
linkItem[x].classList.remove('active')
navLink[x].classList.remove('active')
}
linkItem[i].classList.add('active')
})
}
for (let a = 0; a < navLink.length; a++) {
navLink[a].addEventListener('click', function(e) {
e.preventDefault();
for (let j = 0; j < navLink.length; j++) {
linkItem[j].classList.remove('active') // error belong to this string
}
navLink[a].classList.add('active')
})
}In line 4-6 you loop through navLink using a variable called j and then in line 5 you select item j from linkItem - it should probably be navLink.
1. for (let a = 0; a < navLink.length; a++) {
2. navLink[a].addEventListener('click', function(e) {
3. e.preventDefault();
4. for (let j = 0; j < navLink.length; j++) {
5. linkItem[j].classList.remove('active') // error belong to this string
6. }
7. navLink[a].classList.add('active')
8. })
9. }
This could be an alternative to the places where you remove the class names instead of using a for-loop and confuse yourself:
navLink.forEach(link => link.classList.remove('active'));
And instead of navLink[a].classList.add('active') in line 7 write:
e.target.classList.add('active');