Содержание вкладки не показывает, когда я нажимаю на другую вкладку (HTML, JavaScript) [Закрыто] ⇐ Javascript

[Anonymous]

Вот мой код JavaScript, который, я думаю, является проблемой здесь < /p>


const tabs = document.querySelector('.tabs');
const tabButtons = tabs.querySelectorAll('[role="tabs"]');
const tabPanels = tabs.querySelectorAll('[role="tabpanel"]');

tabButtons.forEach(button => button.addEventListener('click', handleTabClick));

function handleTabClick(event) {
event.currentTarget.setAttribute('aria-selected', true);
tabButtons.forEach(tab => {
// tab.ariaSelected = false;
tab.setAttribute('aria-selected', false);
});
event.currentTarget.setAttribute('aria-selected', true);
//finding associate tab panel
const {
id
} = event.currentTarget;
const tabPanel = tabs.querySelector(`[aria-labelledby="${id}"]`);
console.log(tabPanel);
tabPanel.hidden = false;
}< /code>
[*]





XXX

[*]
YYY




Hello! This is a work in progress...





Hello again!


< /code>
< /div>
< /div>
< /p>
В коде HTML есть много беспорядочности и путаницы, потому что я использую код, данный для создания конструкций вкладок со страницы библиотеки 98.css, который не содержит роли Div перед меню или пуговицами. Итак, вкладка «X» и «Привет! Это работа в процессе работы ... «Панель показывает, когда я загружаю страницу (все выглядит правильно), а кнопки кликируются, но если я нажимаю на« Y », ничего не произойдет.
Я новичок, так что любая помощь ценится. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/795 ... javascript