JSFiddle - React, Tailwind, and code Playground

by Azim Khan

HTML

<div id="header">
  <h1>jQuery Keypress Navigation</h1>
  <ul id="navigation">
    <li><a href="#home">Home ( a )</a></li>
    <li><a href="#about">About ( s )</a></li>
    <li><a href="#contact">Contact ( d )</a></li>
    <li><a href="#awards">Awards ( f )</a></li>
    <li><a href="#links">Links ( g )</a></li>
  </ul>
</div>
<div style="display: block;" id="home" class="container">
  <h2>Welcome!</h2>
  <p>Thanks for taking the time to visit my site, it is greatly appreciated. Navigate this page by either clicking on the links provided above or by pressing any of the keys in parenthesis.</p>
</div>
<div style="display: none;" id="about" class="container">
  <h2>About Me</h2>
  <p>My name is Bedrich Rios and I design web sites. In fact, I have been doing so for about 2 years now at Carleton College and as a freelancer. Web design is more than just another job, is more than hobby, it's my passion. Currently I'm accepting freelance
    jobs, so feel free to contact me.</p>
</div>
<div style="display: none;" id="contact" class="container">
  <h2>No Spam Please</h2>
  <p>Gifts? Job offers? Compliments? They are all welcome.</p>
  <a href="mailto:[email protected]">[email protected]</a>
</div>
<div style="display: none;" id="awards" class="container">
  <h2>Awards, So Many ...</h2>
  <p>If I was to count all of them, we would be here for quite a while. I wish.</p>
</div>
<div style="display: none;" id="links" class="container">
  <h2>Cool Sites</h2>
  <p>Make sure you pay a visit to these sites:</p>
  <ul>
    <li><a href="http://bedrichrios.com/">bedrichrios.com</a></li>
    <li><a href="http://nettuts.com/">nettuts.com</a></li>
  </ul>
</div>
<div id="footer">
  <p>Created by <a href="http://bedrichrios.com/">Bedrich Rios</a></p>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", "Lucida Sans", sans-serif;
  font-size: 100%;
  background: #333;
  background-image: url(pattern.jpg);
}


/* Header
-------------------------------------------------- */

#header {
  width: 460px;
  margin: 0 auto;
  font-size: .75em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

#header h1 {
  color: #fff;
  font-weight: normal;
  margin: 30px 0 3px 0;
  letter-spacing: .04em;
}

#header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header ul li {
  float: left;
  text-align: left;
}

#header ul li a {
  display: block;
  color: #ffff66;
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 20px;
}

#header ul li a:hover {
  text-decoration: underline;
  color: #ffcc66;
}


/* Containers
-------------------------------------------------- */

.container {
  width: 400px;
  height: 300px;
  margin: 30px auto;
  padding: 10px 20px;
  border: 10px solid #fff;
  color: #fff;
  font-size: .75em;
  line-height: 2em;
}

.container h2 {
  padding: 5px 10px;
  width: 200px;
}

.container ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.container ul li {
  margin-bottom: 10px;
}

.container a {
  color: #fff;
}

.container a:hover {
  background: #fff;
  color: #555;
}

#home {
  background: #15add1;
}

#home h2 {
  background: #007aa5;
}

#about {
  background: #fdc700;
}

#about h2 {
  background: #bd9200;
}

#contact {
  background: #f80083;
}

#contact h2 {
  background: #af005e;
}

#awards {
  background: #f18300;
}

#awards h2 {
  background: #bb5f00;
}

#links {
  background: #98c313;
}

#links h2 {
  background: #6f9a00;
}


/* Footer
-------------------------------------------------- */

#footer {
  width: 460px;
  margin: 0 auto;
  margin-bottom: 0;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

#footer p {
  color: #aaa;
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}

#footer a {
 ...

JavaScript

$(document).ready(function() {
  // hides all DIVs with the CLASS container
  // and displays the one with the ID 'home' only

  $(".container").css("display", "none");
  $("#home").css("display", "block");

  // makes the navigation work after all containers have bee hidden 

  showViaLink($("ul#navigation li a"));

  // listens for any navigation keypress activity

  $(document).keypress(function(e) {
    e.preventDefault();
    if (e.altKey) {
      switch (e.which) {
        // user presses the "a"
        case 97:
          showViaKeypress("#home");
          break;

          // user presses the "s" key
        case 115:
          showViaKeypress("#about");
          break;

          // user presses the "d" key
        case 100:
          showViaKeypress("#contact");
          break;

          // user presses the "f" key
        case 102:
          showViaKeypress("#awards");
          break;

          // user presses the "g" key 
        case 103:
          showViaKeypress("#links");
      }
    }
  });

});

// shows a given element and hides all others
function showViaKeypress(element_id) {
  $(".container").css("display", "none");
  // if multiple keys are pressed rapidly this will hide all but the last pressed key's div
  $(".container").hide(1);
  $(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array) {
  array.each(function(i) {
    $(this).click(function() {
      var target = $(this).attr("href");
      $(".container").css("display", "none");
      $(target).slideDown("slow");
    });
  });
}