title: Why does my tab switch not work?
body: <p>I'm having a difficult time figuring out why my tabbed id is not working or functioning like it should. On a click, its supposed to replace the text with something different (i.e. page under construction).</p>
  
  <p>Here is what I have so far..</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Main Page&lt;/title&gt;  &lt;!--main page title --&gt;
    &lt;script type="text/javascript" scr="home_page.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="home_page.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;h1&gt; Express Shop &lt;/h1&gt;
    &lt;div class="content"&gt;
      &lt;div class="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" title="Home" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Inventory"&gt;Inventory&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Directions"&gt;Directions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Contact Us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div id="tab1" class="tab active"&gt;
      &lt;h3&gt;Welcome to Express Shop!&lt;/h3&gt;
      &lt;p&gt;Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!&lt;/p&gt;
      &lt;p&gt; We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="tab2" class="tab"&gt;
      &lt;h3&gt;Inventory&lt;/h3&gt;
      &lt;p&gt;Page Under Construction&lt;p&gt;
    &lt;/div&gt;
  
    &lt;div id="tab3" class="tab"&gt;
      &lt;h3&gt;Directions&lt;/h3&gt;
      &lt;p&gt;Page Under Construction&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="tab4" class="tab"&gt;
      &lt;h3&gt;Contact Us&lt;/h3&gt;
      &lt;p&gt;Page Under Construction&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>h1 {
    font:bold 65px/60px Helvetica, Arial, Sans-serif;
    text-shadow:0px 2px 6px #333;
  }
  
  .content p {
    margin:20px;
  }
  
  .tab {    /*turn off display of all tabs(in-active) */
    display:none;
  }
  
  
  .navbar {
    position:relative;
    margin:0px 0px 0px -40px;
    /*border around tabs */
  }
  
  .navbar ul {
    list-style:none;
  }
  
  .navbar ul li {
    display:inline-block;
  }
  
  
  .navbar ul li:first-child a {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
  }
  
  .navbar ul li:last-child a {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
  }
  
  .navbar ul li a {
    text-decoration:none;
    font:bold 14px Helvetica, Sans-Serif;
    padding:10px;
    margin-right:-7px;
    /*border-radius:3px; */
    background-color:#E0E0E0;
    transition:all linear 0.15s;
  }
  
  .navbar ul li a:hover {
    background-color:rgb(255, 173, 10);
  }
  
  /* needs to be fixed */
  .navbar ul li a.active {
    background-color:rgb(255, 173, 10);
  }
  
  .tab.active {
    display:inherit;
    clear:both;
    margin-top:-7px;
    border:1px solid black;
    width:700px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
  }
  
  h3 {
    text-transform:uppercase;
    padding:10px 0px 0px 10px;
    color:black
    text-shawdow:#000 0px 0px 2px;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(home_page.html).ready(function() {
  
    $('navbar ul li a').click(function() {
      var tab_id =$(this).attr('href');
  
      $('navbar ul li a').removeClass('active');
      $('tab').removeClass('active');
  
      $(this).addClass('active');
      $("#" + tab_id).addClass('active');
    });
  
  });
  </code></pre>