文章导航

JavaScript hashchange 事件

2018-12-23 19:15| 作者: admin| 查看: 579| 评论: 0|来自: 蚂蚁部落

关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。

hashchange 事件是在hash值改变时触发,那么首先解决hash是什么。

可能大家知道location.hash属性,它可以设置或者获取URL的锚部分,也就是从#号开始的部分。

http://www.softwhy.com/ant.html#do,#do就是链接的锚部分。

当锚部分的值发生改变时,hashchange 事件就会触发。

首先介绍一下锚点链接特点:

(1).利用锚点链接也实现定位效果,具体参阅HTML 锚点定位一章节。

(2).服务器不会接收到锚点的内容。

(3).锚点值的改变不会刷新页面,可以产生锚点定位改变效果。

触发hashchange事件主要手段主要有如下几种:

(1).点击页面的锚点链接修改hash值。

(2).location对象的hash和href属性重置锚点链接值。

浏览器支持:

(1).IE8+浏览器支持此事件。

(2).edge浏览器支持此事件。

(3).火狐浏览器支持此事件。

(4).Opera浏览器支持此事件。

(5).谷歌浏览器支持此事件。

(6).safria浏览器支持此事件。

下面通过代码实例演示一下如何触发hashchange事件。

此事件也有很强的实际应用价值,文章的最后会给出一个利用此事件实现的选项卡效果。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">  
a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:50px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#ant{
  width:100%;
  height:50px;
  line-height:50px;
  text-align:center;
  background:#CCC;
  margin-top:300px;
}
</style>
<script>
window.onhashchange = function () {
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "蚂蚁部落";
}
</script>
</head>
<body style="height:1200px;">
  <a href="#ant">点击定位</a>
  <div id="ant"></div>
</body>
</html>

代码分析如下:

(1).点击链接后,能够触发事件,因为链接的锚点(hash)发生改变,观察地址栏。

(2).第一次点击后,需要手动删除地址栏中的锚点,进行下一次测试,否则无法演示效果。

上面仅仅是演示了hashchange事件触发的一个场景,其实利用此事件可以进行一些遍历的操作。

主要基于如下几点:

(1).hash值的修改不会刷新页面。

(2).可以通过一些对象属性获取新的hash值。

(3).当hansh值改变时,利用hashchange事件处理函数达成我们的目标。

下面看一个选项卡切换实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
*{
  margin:0; 
  padding:0;
}
a{
  text-decoration: none;
  color:#fff;
}
.task-list{
  list-style: none;
  overflow: hidden;
  width: 500px;
  margin:auto;
  padding: 10px;
  border:1px solid #DCDCDC;
  border-bottom:none;
  background: #2aabd2;
}
.task-list li{
   float: left;
   margin-right: 30px;
}
.task-list li>a{
  padding:10px 15px;
}
.task-content{
  width: 500px;
  margin:auto;
  height:100px;
  padding: 10px;
  border:1px solid #DCDCDC;
}
.task-content div{
   display: none;
   padding: 15px;
}
.task-content div.active{
  display: block;
}
</style>
<script>
let hashStr;
function watchHash(){
  let hash = window.location.hash.slice(1);
  hashStr = hash;
  if(hashStr){
    let divList=document.querySelectorAll(".task-content div");
    let odiv=document.querySelector("#"+hashStr);
    for(let index=0;index<divList.length;index++){
      divList[index].classList.remove("active");
    }
    odiv.classList.add("active");
  }
}
window.onload=function(){
  watchHash();
  addEventListener("hashchange",watchHash);
}
</script>
</head>
<body>
<ul class="task-list">
  <li><a href="#one">标题一</a></li>
  <li><a href="#two">标题二</a></li>
  <li><a href="#tree">标题三</a></li>
</ul>
<div class="task-content">
  <div id="one" class="active">蚂蚁部落一</div>
  <div id="two">蚂蚁部落二</div>
  <div id="tree">蚂蚁部落三</div>
</div>
</body>
</html>

上述代码利用hashchange事件实现了选项卡切换效果,下面简单介绍一下实现原理。

(1).默认只有第一个选项卡内容是显示的。

(2).标题链接的href的恰好与它相关联的内容div的id属性值相对应。

(2).点击标题会修改url的hash值,那么就会触发hashchange事件。

(3).事件处理函数获取新的hash值,通过此值获取将要显示的内容div。

(4).通过for循环首先将所有的内容div隐藏,然后再将应该显示的div显示出来。

相关阅读:

(1).slice方法参阅JavaScript 字符串slice()一章节。

(2).document.querySelectorAll方法参阅querySelectorAll() 方法一章节。

(3).document.querySelector方法参阅querySelector() 方法一章节。

(4).classList属性参阅JavaScript classList 属性一章节


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部