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

[Anonymous]

Я пытался создавать вкладки в JavaScript. При нажатии на новую вкладку к ней должен быть применен активный класс, а также должно отображаться связанное с ним содержимое панели. Однако активный класс не применяется при нажатии на другую вкладку, и панели также не изменяются, они просто накладываются друг на друга.

Код: Выделить всё

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[i].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