title: Showing Div Boxes with content when clicking on link
body: <p>I am working on a portfolio website and on my homepage I am trying to set it up where you click on navigation links and content boxes appear. My CSS for my div boxes work, and I am able to hide them with JQuery.  The problem is the boxes don't appear when I click on the link.  I'm thinking it has something to do with my link href attributes, but I'm not sure.  I included the portions of my code that have to do with this issue.  Any help would be appreciated.  </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id = "HomeNav"&gt;
      &lt;div id ="Navabsolute"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a id = "skills" href= "#Skills" style=padding-right:190px;&gt;&lt;img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;&gt;Skills&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a id = "works" href= "#Resume" style=padding-right:190px;&gt;&lt;img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;&gt;Resume&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a id = "education" href= "#Education"&gt;&lt;img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;&gt;Work and Education&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="Skills"&gt;&lt;/div&gt;
  &lt;div id="Resume"&gt;&lt;/div&gt;
  &lt;div id="Education"&gt;&lt;/div 
  </code></pre>
  
  <p>Javascript/JQuery</p>
  
  <pre><code>$(document).ready(function(){
      $("#Skills").hide();
      $("#Resume").hide();
      $("#Education").hide();
  
      $("#skills").click(function(){
          $("#Skills").show();
          $("#Resume").hide();
          $("#Education").hide();
      });
  
      $("#works").click(function(){
          $("#Skills").hide();
          $("#Resume").show();
          $("#Education").hide();
      });
  
      $("#education").click(function(){
          $("#Skills").hide();
          $("#Resume").hide();
          $("#Education").show();
      });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#HomeNav {
       position: relative;
       width: 1200px;
       height: 750px;
  
  
  }
  #Navabsolute {
      position: absolute;
      top: 30px;
      left:110px;
  }
  
  #Skills {
      width: 300px;
      height: 300px;
      background-color: red;
  }
  
  #Resume {
      width: 600px;
      height: 600px;
      background-color: blue;
  }
  
  #Education {
      width: 300px;
      height: 300px;
      background-color: green;
  }
  </code></pre>