Podświetlenie tabów po kliknięciu przycisku

Question

Cześć!
Napotkałem niewielki problem przy tworzeniu strony internetowej. Otóż jeżeli klikam po tabulatorach to tab w którym jestem zmienia kolor (jest to dla mnie akurat pożądane), natomiast jeżeli poruszam się strzałkami po tabulatorach to aktywny tab w którym jestem już się nie podświetla. W jaki sposób mogę sprawić aby tabulatory zachowywały się tak samo po kliknięciu w nie ręcznie czy też za pomocą strzałek?
LINK

Jeżeli to możliwe to czy całość można rozwiązać samym CSS'em? Czy trzeba jednak użyć trochę Js'a czy jquery?

Answer 1

Najprostsze chyba rozwiązanie:
Do button.tablinks dodać np, data-city="Miasto". Potem w js $('button.tablinks[data-city="Miasto"').toggleClass('active')

Answer 2

W kodzie i tak masz użytego JSa, w tagu <script>. Ogólnie rzecz biorąc masz tam strasznie namotane w kodzie i są lepsze wyjścia. Po co używać onclick w HTML jak można dodać addEventListener w JS?

Już sama struktura HTML niepotrzebnie się powtarza, bo w każdym divie miasta masz osobne strzałki (nawigację), a nawigacja powinna być jedna do całości.

 

P.S.
Widzę, że używasz tam klas z Bootstrapa, to czemu nie wykorzystasz tabów (komponent), które tam już są?

Comments

Wiem o tym, ze ten kod nie jest najlepszy ale na obecną chwilę nie zależy mi na jego optymalizacji czy lepszym zapisie, zależy mi głównie na tym aby po kliknięciu w strzałki taby były podświetlone.
Nawigacja wspólna dla całości? Ciekawe, nie pomyślałem o tym, w jaki sposób mógłbym to zrobić?
No korzystam z Bootstrapa ale jakoś nie mam pomysłu co zmienić aby te taby się podświetlały :/