Linking between pages

by twong17

HTML

<div id="title">
 SINGLE FILE MULTIPLE PAGES
</div>
 <!------------------------------------------------>
<div id="navigation-container">
 <a id="showPage1" class="show-page-link">Navigation Center</a>
 <a id="showPage2" class="show-page-link">Report an Incident</a>
 <a id="showPage3" class="show-page-link">Incident Search</a>
 <a id="showPage4" class="show-page-link">page 4</a>
 
</div>
 <!------------------------------------------------>
<div id="page1" class = "page">
  Please select where you would like to go:
</div>
 <!------------------------------------------------>
<div id="page2" class="page">
 <head>
   <title> title placeholder </title>
 </head>

 <body>
   <h1>Incident Report Form</h1>
   <hr>
   <h2>
     Client Information:
   </h2>
   Last Name: <br>
   <input type="text" name="lname">
   <br><br> First Name: <br>
   <input type="text" name="fname">
   <br><br> Job Position: <br>
   <input type="text" name="job">
   <br><br> Email Address: <br>
   <input type="text" name="email">
   <br><br> IP Address: <br>
   <input type="text" name="IPAddress">
   <hr>

   <h2>
     Incident
   </h2>
   Incident Number: <br>
   <input type="text" name="incidentNum">
   <br>
   <br> Incident State: <br>
   <select>
     <option value="">-Select-</option>
     <option value="incidentState">Open</option>
     <option value="incidentState">Closed</option>
     <option value="incidentState">Stalled</option>
   </select>
   <br> <br> Type of incident: <br>
   <select>
     <option value="">-Select-</option>
     <option value="incidentType">Email Based Abuse</option>
     <option value="incidentType">Copyright Infringement Reports</option>
   </select>

   <br> <br> Comment: <br>
   <textarea rows="7" cols="44">Explanation.</textarea>
   <br>
   <input type="submit" value="Submit">
 </body>
</div>
 <!------------------------------------------------>
<div id="page3" class="page">
  <head>
<title>Incident Search Page</title>
</head>
<body>
<h1>
Incident Seach...

CSS

html {
  font-size: 11px;
  font-family: Helvetica, Arial, Sans-Serif;
  color: #333;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

a {
  cursor: pointer;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 110px;
  border: 1px solid #efefef;
  background-color: #666;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

a:hover,
a.hover {
  background-color: #0080FF;
}

a.current {
  background-color: #0080FF;
}

#title {
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  padding: 0;
  color: #6E6E6E;
  background-color: #0B3861;
}

#navigation-container {
  text-align: center;
  background-color: #ccc;
  padding: 2px;
}

div.page {
  border: 0 none;
  height: 200px;
  line-height: 20px;
  text-align: center;
  font-size:   10px;
  font-weight: 700;
  color: #000000;
}

a.show-page-link {}

JavaScript

$(document).ready(function() {
  $("#showPage1").on("click", function() {
    show("#page1", "#showPage1");
  });
  $("#showPage2").on("click", function() {
    show("#page2", "#showPage2");
  });
  $("#showPage3").on("click", function() {
    show("#page3", "#showPage3");
  });
  $("#showPage4").on("click", function() {
    show("#page4", "#showPage4");
  });
  show("#page1", "#showPage1", true);
});

function show(pageId, linkId, force) {
  var currVal = $(pageId).css("display");
  if (force || currVal === "none") {
    $(".page").css("display", "none");
    $(pageId).css("display", "block");
    $(".show-page-link").removeClass("current");
    $(linkId).addClass("current");
  }
}