我在单页网站上工作，每个页面都组织成部分标签。每个部分都放在彼此之上。我需要一种使用 jquery 的方法，根据当前位置，DOM 将隐藏其余部分。 例如:(点击关于链接将带您到关于部分)
我当前的 DOM 结构:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Single Scroll</title>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Create Theme</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<h1 class="introtext">Title here</h1>
<span class="btn buttonborder">
Text placeholder
</span>
</div>
</div><!-- row -->
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Test 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Test 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p>
</div>
</div>
</div>
</section>
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
body {
margin-top: 50px;
margin-bottom: 50px;
background: none;
}
section {
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
}
最佳答案
您可以通过在读取当前 window.location 的散列部分的地方注册 hashchange 回调来实现这一点。您可以选择与 id 不同的 DOM 选择技术。
<script>
$( document ).ready(function() {
$("section").hide();
$(window).on("hashchange", function(){
var hash = window.location.hash.substring(1); // hash part of url withou the first letter (#)
$("section").hide();
$("#"+hash).show();
});
});
</script>
请注意，还添加了用于隐藏和取消隐藏元素的 id。
<section id="about">
关于javascript - 基于当前位置的单页隐藏/显示部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20958030/