I am having some road blocks getting this going. I have 4 navigation links and within the content container, I have declared a handful sections and have id tagged them accordingly. I would like to load the desired section according to the clicked Navigation link. I seem to be doing something wrong and would highly appreciate it if anyone can lend me a help hand on this, please.
Here is my HTML code:
<!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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
