Przełączanie paneli zakładek z klasą ukryty
Treść zadania
W interfejsie mamy dwa przyciski zakładek: <button id="tab1">Opis</button> i <button id="tab2">Opinie</button> oraz dwa panele treści: <div id="panel1">Treść opisu</div> i <div id="panel2" class="ukryty">Opinie klientów</div>.
Napisz obsługę:
1. Po kliknięciu #tab2 usuń klasę 'ukryty' z #panel2 i dodaj klasę 'ukryty' do #panel1.
2. Po kliknięciu #tab1 usuń klasę 'ukryty' z #panel1 i dodaj klasę 'ukryty' do #panel2.
Co będzie oceniane
- Obsługa kliknięcia dla obu przycisków zakładek.
- Właściwe operowanie metodami classList.add i classList.remove na obu panelach.
- Poprawne przełączanie widoczności paneli.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Przełączenie na zakładkę 2 ukrywa panel 1 i odsłania panel 2 — klasa #panel1 = ukryty; licznik #panel2.ukryty = 0
- Powrót na zakładkę 1 odsłania panel 1 i ukrywa panel 2 — licznik #panel1.ukryty = 0; klasa #panel2 = ukryty
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zaprogramuj przełączanie widoczności paneli #panel1 i #panel2 za pomocą klasy 'ukryty'
Wskazówki
Wskazówka 1
Zarządzaj widocznością paneli poprzez dodawanie i usuwanie klasy odpowiedzialnej za ukrywanie elementu w arkuszu stylów.
Wskazówka 2
Podepnij dwa osobne nasłuchiwacze kliknięć pod oba przyciski. W każdym z nich zdejmij klasę ukrycia z panelu powiązanego z klikniętym przyciskiem i dodaj ją do drugiego panelu.