fix scroll jump

cheryllium · Jan 6, 2024 · e5d01a2 · e5d01a2
1 parent 1443801
commit e5d01a2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,8 @@
         <br />
 
         <div id="tabs">
-            <a href="#game">Aquarium</a>
-            <a href="#journal">Journal</a>
+            <a href="#game" id="game-link">Aquarium</a>
+            <a href="#journal" id="journal-link">Journal</a>
         </div>
         <div id="main">
             <div id="game" class="tab">

diff --git a/src/main.js b/src/main.js
@@ -92,11 +92,16 @@ function setup() {
   uiManager.updateFishInfo();
   uiManager.createFishJournal();
 
-  document.querySelector("#game").addEventListener("click", function () {
-    journalOpen = false; 
+  document.querySelector("#game-link").addEventListener("click", function (event) {
+    event.preventDefault(); 
+    journalOpen = false;
+    document.querySelector('#journal').classList.remove("active");
   });
-  document.querySelector("#journal").addEventListener("click", function () {
-    journalOpen = true; 
+  document.querySelector("#journal-link").addEventListener("click", function (event) {
+    event.preventDefault(); 
+    journalOpen = true;
+    console.log(document.querySelector('#journal'));
+    document.querySelector('#journal').classList.add("active");
   }); 
 }
 

diff --git a/styles.css b/styles.css
@@ -66,7 +66,7 @@ button {
   background-color: #7a8d9b;
   display: none;
 }
-#journal:target {
+#journal.active {
   display: flex;
 }
 #fish-list, #fish-details {