fix: switching between tabs doesnt always work

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index eb79b1b1708fddb513de5a8396c9e3ec8f60b006..6d8387fc713866b8d15947c028cc88389e466dc9 100644 (file)
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -178,6 +178,9 @@ nav a.active {
 .tab {
   display: none;
 }
+.tab.active {
+  display: block;
+}
 #main-nav {
   margin-bottom: 2rem;
 }

diff --git a/src/client/index.ts b/src/client/index.ts
index 63613e8291c5d5a5fbd8aff24c1c33a9340aff84..d5caf511c2b7d871d0593b85c78f1178fbdc4e8b 100644 (file)
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -184,10 +184,11 @@ $('nav a').on('click', e => {
   e.preventDefault();
   e.stopPropagation();
 
-  const tabContainer = $(e.target).data('container');
+  const $tabContainer = $(`#${$(e.target).data('container')}`);
 
-  $(`#${tabContainer} .tab`).css('display', 'none');
-  $(`#${$(e.target).data('section')}`).css('display', 'block');
+  $tabContainer.find('.tab').removeClass('active');
+
+  $(`#${$(e.target).data('section')}`).addClass('active');
 
   $(e.target).closest('nav').find('a').removeClass('active');
   $(e.target).addClass('active');