利用JS hash制作单页Web应用的方法详解

前言

本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

一、何为hash

这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符。通常,我们可以通过location.hash的方式获取哈希值或设置哈希值。当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值。

例如:

/** JS方式 **/
location.hash = 'hash'; //设置hash,该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash
/** HTML方式 **/
<a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

值得注意的是,无论以何种方式改变哈希值,页面都不会刷新。

二、hash有何用处

1. 设置锚链接

通过设置锚链接(即为上述HTML方式),可使点击链接后页面根据元素id滑动到指定位置,即使页面跳转后也不例外。

2. 实现单页应用的制作

可以根据哈希值的变化来使相应元素显示或者隐藏,从而实现页面无刷新的单页切换。

三、何为单页Web应用

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

以上是百度百科对单页应用(SPA)的解释,而使用hash可以非常方便的实现“页面”间的切换。

四、如何使用hash制作SPA

简单来说,就是先只显示第一个page,然后通过改变hash值来切换显示不同的page,前一个page隐藏。
这里写个简单的Demo演示一下吧:

1. 首先写好HTML结构

<article class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-nav">
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

2. 然后为其设置CSS样式

.page{ display: none; /* 其他样式省略 */}
.page.cur{ display: block;}
/* 其他样式省略 */
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5199.html