单页隐藏/显示基于当前位置的部分
我正在开发单页网站，每个页面都组织成部分标签。 每个部分都放在一起。 我需要一种使用jquery的方法，基于当前位置，DOM将隐藏其余部分。 例如:(关于链接按下会带你到关于部分）
我目前的DOM结构：
Create Single Scroll Title here
Test 2
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.
Test 3
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.
CSS：
body { margin-top: 50px; margin-bottom: 50px; background: none; } section { width: 100%; height: 100%; position:absolute; top: 0; left: 0; }
您可以通过注册hashchange回调来实现这一点，其中读取当前window.location的哈希部分。 您可以选择不同于ID的不同DOM选择技术。
请注意，还会添加用于隐藏和取消隐藏元素的ID。
使用数据索引而不是#id。
在所有li上添加数据索引
然后对各部分做同样的事情
....
有关详细信息，请参阅此工作小提琴
你应该给每个部分一个id，即。
。
更改您的css for section以包含display: none属性
使用以下JS代码：
$(document).ready(function() { $('section').eq(0).show(); $('navbar-nav').on('click', 'a', function() { $($(this).attr('href')).show().siblings('section:visible').hide(); }); });
或者，如果您遵循严格的订购（即，约为第一，服务第二，等）：
$(document).ready(function() { $('section').eq(0).show(); $('.navbar-nav').on('click', 'li', function() { $('section').eq($(this).index()).show().siblings('section:visible').hide(); }); });
这两种方法都允许使用动态内容，尽管我个人使用的是最后一种方法。
在链接中添加ID
About
在该部分添加ID
添加一些jquery
$("#about").click(function(){ $("#about-content").show() $("#services-content").hide() $("#contact-content").hide() })
这里的工作示例