title: Cannot get HTML5 Loading data-section when click on Navigation link to work
body: <p>Getting here through Google search and following mainly <a href="https://stackoverflow.com/questions/11691262/html5-loading-a-section-content-into-a-main-view-wrapper">this</a> and <a href="https://stackoverflow.com/questions/11716777/html5-loading-data-section-when-click-on-navigation-link">this</a> thread (and some other third party sources for gaining more knowledge about the subject), I think I pretty much am trying to accomplish something similar to what user Combustion007 from the threads is trying.</p>
  
  <p>BUT to my disappointment I could not get it to work. I am not at home at all with JS and have much to learn about CSS and what HTML5 brought along so I guess there's simply something I am missing here. I would appreciate if someone could take a look and tell me what I need to do to get this thing working.</p>
  
  <p>I've been at this for hours and simply at this point I think I have to ask for some guidance. Thank you in advance! :)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Title&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="css/css.css"&gt;
  
  &lt;!--[if lt IE 9]--&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;!--[endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;header class="headermod"&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
    &lt;/header&gt;
    &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" data-section="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-section="#photo"&gt;Photography&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-section="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-section="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class="content"&gt;
  
  
      &lt;section id="home"&gt;
        &lt;h2&gt;Home&lt;/h2&gt;
        &lt;p&gt;Home&lt;/p&gt;&lt;/section&gt;
  
      &lt;section id="photo"&gt;
        &lt;h2&gt;Photos&lt;/h2&gt;
        &lt;p&gt;Photos&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="about"&gt;
        &lt;h2&gt;About&lt;/h2&gt;
        &lt;p&gt;About&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="contact"&gt;
        &lt;h2&gt;Contact&lt;/h2&gt;
        &lt;p&gt;Contact&lt;/p&gt;
      &lt;/section&gt;
  
    &lt;!-- end .content --&gt;&lt;/div&gt;
    &lt;footer&gt;
    &lt;div class="footermod"&gt;
    &lt;hr class="footer-hr"&gt;
      &lt;p style="text-align: left;"&gt;&amp;copy; Copyright&lt;/p&gt;
    &lt;/div&gt;
    &lt;/footer&gt;
    &lt;!-- end .container --&gt;&lt;/div&gt;
  
  &lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/modernizr.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $("a").on("click", function(e) {
      e.preventDefault();
      var sectionID = '#'+ $(this).data("section");
      $("#content section:visible").fadeOut();
      $(sectionID).fadeIn();
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      color: #FFF;
      font-size: 90%;
      background-color: #000000;
  }
  
  ul, ol, dl { 
      padding: 0;
      margin: 0;
  }
  h1, h2, h3, h4, h5, h6, p {
      margin-top: 0;   
      padding-right: 15px;
      padding-left: 15px; 
      color: #FFF;
      background-color: #000;
  }
  a img { 
      border: none;
  }
  
  a:link {
      color: #FFF;
      text-decoration: none; 
  }
  a:visited {
      color: #000000;
      text-decoration: none;
  }
  a:hover, a:active, a:focus { 
      color: #FFF;
      text-decoration: none;
  }
  
  .container {
      width: 890px;
      margin: 0 auto; 
      background-color: #000000;
  }
  
  header {
      background: #000000;
  }
  
  .headermod {
  
      padding-top: 20px;  
  
  }
  
  .sidebar1 {
      float: right;
      width: 0px;
      background: #000000;
      padding-bottom: 10px;
  }
  .content {
      padding: 10px 0;
      float: left;
      overflow:auto; 
  }
  
  
  .content tr, .content ol {
      padding: 0 15px 15px 40px; 
  }
  
  
  nav ul {
      list-style: none; 
      border-top: 1px solid #000; 
      margin-bottom: 15px; 
      background-color: #000;
  }
  nav ul li {
      border-right: 0px solid #000;
      float: left;
      display: inline;
  }
  nav ul a, nav ul a:visited { 
      padding: 5px 5px 5px 15px;
      display: block; 
      width: 200px; 
      text-decoration: none;
      background: #39F;
  }
  nav ul a:hover, nav ul a:active, nav ul a:focus { 
      color: #FF6;
      background-color: #000000;
  }
  
  footer {
      padding: 10px 0;
      background: #000000;
      position: relative;
      clear: both; 
  }
  
  .footermod {
      font-size: 60%;
      text-align: left;
  }
  
  .footer-hr {
      width: 880px;
  }
  
  header, section, footer, aside, nav, article, figure {
      display: block;
      background-color: #000;
  }
  
  section
  {
      display: none;
      text-align: left;
  }
  
  #home { height: 400px; width: 890px; display: block; }
  #photo { height: 400px; width: 890px; }
  #about { height: 400px; width: 890px; }
  #contact { height: 400px; width: 890px; }
  </code></pre>