HTML5 Carregando seção de dados quando clicar no link Navegação
Eu estou tendo alguns bloqueios de estrada para conseguir isso. Eu tenho 4 links de navegação e dentro do contêiner de conteúdo, eu declarei um punhado de seções e identifiquei o id de acordo com elas. Eu gostaria de carregar a seção desejada de acordo com o link de navegação clicado. Eu pareço estar fazendo algo errado e apreciaria muito se alguém pudesse me dar uma ajuda sobre isso, por favor.
Aqui está o meu código HTML:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 5</title>
<meta name="descript" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div class="wrapper">
<!-- HEADER -->
<header>
<section class="header-wrapper">
<!-- LOGO -->
<section class="logo">
<figure>
<a href="#" data-section="#home-section" title="home"><img src="assets/img/global/logo2.png"></a>
</figure>
</section>
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="#" data-section="#about" title="about">ABOUT</a></li>
<li><a href="#" data-section="#tech" title="technology">TECHNOLOGY</a></li>
<li><a href="#" data-section="#vision" title="vision">VISION</a></li>
<li><a href="#" data-section="#press" title="press">PRESS</a></li>
</ul>
</nav>
</section>
</header>
<!-- CONTENT CONTAINER -->
<section id="content" class="content-wrapper">
<section id="home" style="width:100%; height:500px; background-color:#ff9900;">
HOME SECTION
</section>
<section id="about" style="width:100%; height:500px; background-color:#ff9900;">
ABOUT SECTION
</section>
<section id="tech" style="width:100%; height:500px; background-color:#ff9900;">
TECHNOLOGY SECTION
</section>
<section id="vision" style="width:100%; height:500px; background-color:#ff9900;">
VISION SECTION
</section>
<section id="press" style="width:100%; height:500px; background-color:#ff9900;">
PRESS SECTION
</section>
<section id="privacy" style="width:100%; height:500px; background-color:#ff9900;">
PRIVACY SECTION
</section>
<section id="contact" style="width:100%; height:500px; background-color:#ff9900;">
CONTACT SECTION
</section>
</section> <!-- CONTENT CONTAINER ENDS HERE -->
<!-- CLEAR FOOTER -->
<div class="clearfooter"></div>
</div><!-- WRAPPER ENDS HERE -->
<footer>Footer Here.</footer>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/modernizr.js"></script>
<script>
$("a").bind("click", function() {
var id = $(this).data("section");
$("#content section:visible").fadeOut(function() {
$("#contnet section").fadeIn();
});
});
</script>
</body>
</html>