Tabs nie działa poprawnie

Question

Cały kod: https://codepen.io/Nearr2020/pen/vYxzOaJ

Jak widać po kliknięciu na "NA" albo "AS" nie widać ich zawartości.

Dzieje się to tylko gdy dodam ten kod: 

    <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="na-content">
              <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="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="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="parting-modes"></div>

 

Answer 1

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');     
    }
  })
});

 

Comments

Dziękuje :)

Answer 2

Zwróć uwagę co zwraca Ci 

tabBody.getElementsByTagName("div")[i]

Myślę, że zbyt ogólnikowo pobierasz elementy. 

let tabsPane = tabHeader.getElementsByTagName("div");

 

Comments

Również dziękuję za zwrócenie mi uwagi :)