用jQuery设计单页网站
用jQuery设计单页网站
提问于 2013-11-13 21:24:41
下面是我正在做的一个网页网站的psuedo代码。我需要能够作出一个单一的网页网站，不是基于滚动(这是典型的)。这里的想法是，我的站点有一个nav，用户选择一个菜单，并根据所选的菜单在内容div上呈现正确的页面div。
page divs也在HTML中，除非选择了正确的菜单(或者如果更好的方法是将页面放置在Javascript文件中)，否则不应该显示：
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1"> <!-- for menu1 -->
<div>the content</div>
</div>
<div id="page2"> <!-- for menu2 -->
<div>the content</div>
</div>如何使用jQuery实现这一目标？
回答 5
Stack Overflow用户
发布于 2013-11-13 21:32:19
要在不同的容器中显示预加载的内容，可以在一些CSS中使用锚标记。
<a href="#page1">a</a>
<a href="#page2">b</a>
<a href="#page3">c</a>
<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>CSS
#page1, #page2, #page3{
display:none;
}
#page1:target{
display:block;
}
#page2:target{
display:block;
}
#page3:target{
display:block;
}Stack Overflow用户
发布于 2013-11-13 21:40:29
正如另一个答案所述，您可能想看看AngularJS。如果您选择：http://www.youtube.com/watch?v=i9MHigUZKEM，这里有一个很好的教程可以帮助您入门：
但是，由于您的问题说明了jQuery，最好的方法可能是让所有页面单独通过AJAX加载并替换当前的html。
另一种方法是立即将所有内容都放在页面上，并根据用户单击的菜单项隐藏和显示内容。但是，如果同时在页面上有大量的内容，这可能会使页面变得非常缓慢。
Stack Overflow用户
发布于 2013-11-13 21:44:04
如果希望将内容嵌入页面但隐藏，请使用jQuery的.hide()和.show()
如果希望将内容保存在单独的页面中，请使用jQuery的.load()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19970185
复制
相似问题
带有jquery ()的单页网站
优化单页网站的Jquery动画
jQuery中的单页网站菜单
用knockoutjs组织单页网站html代码
使用jquery和ajax的单页网站
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
