• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tabs nie działa poprawnie

+1 głos
65 wizyt
pytanie zadane 9 czerwca w HTML i CSS przez Nearr Obywatel (1,920 p.)

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>

 

2 odpowiedzi

+1 głos
odpowiedź 10 czerwca przez .::VBService::. VIP (104,540 p.)
wybrane 10 czerwca przez Nearr
 
Najlepsza

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

 

1
komentarz 10 czerwca przez Nearr Obywatel (1,920 p.)
Dziękuje :)
+3 głosów
odpowiedź 10 czerwca przez pablop76 VIP (113,660 p.)

Zwróć uwagę co zwraca Ci 

tabBody.getElementsByTagName("div")[i]

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

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

 

1
komentarz 10 czerwca przez Nearr Obywatel (1,920 p.)
Również dziękuję za zwrócenie mi uwagi :)

Podobne pytania

0 głosów
0 odpowiedzi 102 wizyt
pytanie zadane 29 października 2017 w HTML i CSS przez Ziuziek Mądrala (5,150 p.)
0 głosów
1 odpowiedź 74 wizyt
pytanie zadane 30 kwietnia 2017 w HTML i CSS przez zed Nowicjusz (230 p.)
0 głosów
2 odpowiedzi 213 wizyt
pytanie zadane 11 lutego 2016 w HTML i CSS przez MatiiTv Gaduła (3,770 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

83,606 zapytań

132,262 odpowiedzi

291,761 komentarzy

55,206 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...