Как создать вкладки в JavaScript? ⇐ CSS

[Anonymous]

I've been trying to create tabs in JavaScript. When clicking on a new tab the active class should be applied to it as well as its associated panel content should be displayed. However, the active class isn't being applied when another tab is clicked and the panels are not changing either, they are just stacking on top of each other.

const tabs = document.querySelector(".tabs"); const active = document.querySelector(".active"); const panel = document.querySelector(".panel"); function onTabClick(event) { // deactivate existing active tabs and panel active.classList.remove('.active'); for (let i = 0; i < panel.length; i++) { panel.style.display = "none"; } // activate new tabs and panel event.target.classList.add('.active'); let classString = event.target.innerHTML; console.log(classString); document.getElementsByClassName(classString)[0].style.display = "block"; } tabs.addEventListener('click', onTabClick, false); .tabs { display: flex; justify-content: space-around; margin: 20px 2px 40px 2px; height: 40px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); } .tabs>* { width: 100%; color: dimgray; height: 100%; cursor: pointer; display: flex; justify-content: center; align-items: center; } .tabs>*:hover:not(.active) { background-color: rgb(220, 220, 220); } .tabs>.active { color: white; background-color: #4CAF50; } .panel { display: none; } List Grid something panel 1 text panel 2 text panel 3 text


Источник: https://stackoverflow.com/questions/547 ... javascript