HTML5单击导航链接时加载数据部分 [英] HTML5 Loading data-section when click on Navigation link
本文介绍了HTML5单击导航链接时加载数据部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些路障正在发生。我有4个导航链接，并且在内容容器中，我已经声明了一些小节，并且用id来标记它们。我想根据点击的导航链接加载所需的部分。我似乎在做错什么，并非常感谢，如果有人可以借给我一个帮助手，请。
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.
这是我的HTML代码：
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>
推荐答案
这可能有效：
$("a").bind("click", function(e) {
e.preventDefault();
var id = $(this).data("section");
$("#content section:visible").fadeOut();
$(id).fadeIn();
});
这篇关于HTML5单击导航链接时加载数据部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
