make module switching work

diff --git a/index.html b/index.html
index 1b1eea616103126b15bc5fb9bad015fddcb9ae8d..9d407e04e0b618f9d25a5563d4259cc180615256 100644 (file)
--- a/index.html
+++ b/index.html
@@ -32,14 +32,15 @@
 \r
 <div id="sideBottom">\r
 <ul id="navlist">\r
-<li id="navPos"><a href="#">Position</a></li>\r
-<li id="navGrav"><a href="#">Gravity</a></li>\r
-<li id="navAcou"><a href="#">Acoustics</a></li>\r
+<li id="navPos"><a href="#" onclick="switchModule('Pos');">Position</a></li>\r
+<li id="navGrav"><a href="#" onclick="switchModule('Grav');">Gravity</a></li>\r
+<li id="navAcou"><a href="#" onclick="switchModule('Acou');">Acoustics</a></li>\r
 </ul>\r
 </div>\r
 \r
 <div id="sideRemark">\r
-<a href="http://www.startrek.com/">STAR TREK</a> and related items are trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.\r
+<a href="http://www.startrek.com/">STAR TREK</a> and related items are\r
+trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.\r
 </div>\r
 </div>\r
 \r
@@ -52,7 +53,18 @@ Web Tricorder
 <div id="mainSepBottom"></div>\r
 \r
 <div id="mainContent">\r
+<section id="sectNull">\r
 <p>This is the main area for tricorder output.</p>\r
+</section>\r
+<section id="sectPos">\r
+<p>This is the main area for position tricorder output.</p>\r
+</section>\r
+<section id="sectGrav">\r
+<p>This is the main area for gravity tricorder output.</p>\r
+</section>\r
+<section id="sectAcou">\r
+<p>This is the main area for acoustics tricorder output.</p>\r
+</section>\r
 </div>\r
 \r
 </body>\r

diff --git a/js/tricorder.js b/js/tricorder.js
index b04ac1292a61e72209bbf30be86ae3eb537bdb4e..c1b61e7c389bd991a2229cae0eb8b8a8f040b0e5 100644 (file)
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -21,4 +21,18 @@ function updateStardate() {
   gStardate.textContent = sdateval.toFixed(1);
 
   setTimeout(updateStardate, 5*60*1000);
-}
\ No newline at end of file
+}
+
+function switchModule(modname) {
+  var sections = document.getElementsByTagName('section');
+  for (var i = 0; i <= sections.length - 1; i++) {
+    sections[i].classList.remove("active");
+  }
+  var navs = document.getElementById('navlist').children;
+  for (var i = 0; i <= navs.length - 1; i++) {
+    navs[i].classList.remove("active");
+  }
+
+  document.getElementById("nav" + modname).classList.add("active");
+  document.getElementById("sect" + modname).classList.add("active");
+}

diff --git a/style/tricorder.css b/style/tricorder.css
index 891e0e3dc9c1c4fded0133f0556b48b52a52f1de..b7b8fa510969731a06d52eec394a96ba146444fa 100644 (file)
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -119,13 +119,19 @@ a:hover, a:active { color: #FFCF00; }
 #navlist > li:hover,
 #navlist > li:active,
 #navlist > li:hover > a,
-#navlist li:active > a,
+#navlist > li:active > a,
 #navlist > li > a:hover,
 #navlist > li > a:active {
   background-color: #FFCF00;
   color: #000000;
 }
 
+#navlist > li.active,
+#navlist > li.active > a {
+  background-color: #008484;
+  color: #FFCF00;
+}
+
 #navPos, #navPos > a {
   background-color: #FF9F00;
   color: #000000;
@@ -198,3 +204,11 @@ a:hover, a:active { color: #FFCF00; }
   overflow: auto;
   border: none;
 }
+
+section {
+  display: none;
+}
+
+section.active {
+  display: block;
+}