Есть блок который разделен на 2 блока. Слева находятся заголовки (6 заголовков) в отдельном блоке и отдельный блок в котором находятся блоки с контентом (6 блоков). Нужно чтобы при наводе на заголовок, появлялся соответствующий блок с контентом, а другие пропадали. Я все это сделал, но мне кажется это можно было все сделать в пару строк, а не так как я:( Я сразу при наводе на заголовок придаю класс активности, а после сравниваю, если именно у этого элемента есть такой класс, то показываем именно этот блок. Можно как-то упростить, или это неплохой вариант?
function directions() {
const directionsLinkTitle = document.querySelectorAll('.directions__link__title'),
directionsItemBlock = document.querySelectorAll('.directions__item__block');
directionsLinkTitle.forEach(item => {
item.addEventListener('mouseover', (e) => {
directionsLinkTitle.forEach(item => {
item.classList.remove('directions__link__title__active');
});
e.target.classList.add('directions__link__title__active');
if (directionsLinkTitle[1].className == 'directions__link__title directions__link__title__active') {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[1].classList.add('directions__item__block__active');
});
}
else if (directionsLinkTitle[2].className == 'directions__link__title directions__link__title__active') {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[2].classList.add('directions__item__block__active');
});
}
else if (directionsLinkTitle[3].className == 'directions__link__title directions__link__title__active') {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[3].classList.add('directions__item__block__active');
});
}
else if (directionsLinkTitle[4].className == 'directions__link__title directions__link__title__active') {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[4].classList.add('directions__item__block__active');
});
}
else if (directionsLinkTitle[5].className == 'directions__link__title directions__link__title__active') {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[5].classList.add('directions__item__block__active');
});
} else {
directionsItemBlock.forEach(item => {
item.classList.remove('directions__item__block__active');
directionsItemBlock[0].classList.add('directions__item__block__active');
});
}
});
});
}
directionsLinkTitle.forEach((item, index) => {...
а дальше немного подумайте