Tak jak już @pablop76 napisał
Myślę, że zbyt ogólnikowo pobierasz elementy.
Propozycja
<div class="tabs">
<div class="tab-header">
<div class="tab active">
EU
</div>
<div class="tab">
NA
</div>
<div class="tab">
AS
</div>
</div>
<div class="content-wrapper">
<div class="content active">
<div class="xezz-server-list">
<div class="server-name">FFA 1</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">FFA 2</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="parting-modes"></div>
<div class="xezz-server-list">
<div class="server-name">Instant 1</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Instant 2</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="parting-modes"></div>
<div class="xezz-server-list">
<div class="server-name">Gigasplit 1</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Gigasplit 2</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Gigasplit 3</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Gigasplit 4</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="parting-modes"></div>
<div class="xezz-server-list">
<div class="server-name">Megasplit 1</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="parting-modes"></div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 1</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 2</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 3</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 4</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 5</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
<div class="xezz-server-list">
<div class="server-name">Self-Feed 6</div>
<div class="players-area">
<div class="players-counter">10 / 70</div>
</div>
</div>
</div>
<div class="content">
NA lorem
</div>
<div class="content">
AS lorem
</div>
</div>
</div>
.tabs {
width: 345px;
height: 500px;
background: rgb(19, 19, 19);
overflow: hidden;
border-radius: 5px;
}
.tabs .tab-header {
display: flex;
align-items: center;
}
.tabs .tab-header .tab {
width: 121px;
text-align: center;
color: #919191;
background: rgb(15, 15, 15);
font-family: 'Ubuntu', sans-serif;
height: 35px;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
outline: none;
user-select: none; /* dodane */
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid #00477e;
}
.as-btn {
margin-top: -5px;
border-right: 2px solid #00477e;
}
.tabs .tab-header .tab:hover:not(.active) {
color: #bebebe;
background: #161616;
transition: background 0.4s;
}
.tabs .tab-header .active {
color: #ffffff;
background: #131313;
transition: 0.1s;
}
.tabs .tab-header .active:hover {
cursor: default;
}
.tabs .content-wrapper {
position: relative;
height: 480px;
}
.tabs .content-wrapper .content {
position: absolute;
opacity: 0;
letter-spacing: 1em; /* :-) */
transition: all 0.45s ease-out; /* :-) */
}
.tabs .content-wrapper .active {
letter-spacing: 0; /* :-) */
opacity: 1;
}
/* dodane do testów */
.tabs .content-wrapper .content {
color: white;
}
const tabs = document.querySelectorAll('.tab-header .tab');
const tabs_content = document.querySelectorAll('.content-wrapper .content');
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
if (! tabs[index].classList.contains('active')) {
tabs.forEach(tab => { tab.classList.remove('active'); });
tabs_content.forEach(tab => { tab.classList.remove('active'); });
tabs[index].classList.add('active');
tabs_content[index].classList.add('active');
}
})
});