window.location.href和window.locaiton.hash
(1)window.location.href 得到的是完整的URL
比如:window.location.href = ' www.baidu.com'
(2)window.location.hash 得到的是锚链接
比如:window.location.hash= ' #all'
(3)window.location.search得到的是URL‘?’号后面的字符串部分
www.baidu.com/?username=aaa&age=10
比如:window.location.search= ' ?username=aaa&age=10'
hash 属性 即URL字符串中从#号开始的部分(从 # 号开始的部分)。
(1)使用浏览器访问网页时,如果网页url中带有hash ‘#123’,那么页面就会定位到id或者name为123的元素的位置;
(2)hash改变的话,不会导致页面重新加载(页面只需要一次加载,速度快);
window.location.hash值的变化以及浏览器地址栏(#号后面的值发生变化)任何一方发生变化,都会触发onhashchange事件
hashchange事件
window.addEventListener('hashchange',function(){
console.log(111);
});
addEventListener() 方法,事件监听,你也可以使用removeEventListener()方法来移除事件监听;
element.addEventListener(event,fun,bool);
(1)event: 事件类型(如‘click’)
(2)fun: 事件触发后的回调函数;
(3)bool:布尔值,用于描述事件是冒泡还是捕获,可选;
Demo(利于hash实现标签页(tab页))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hash</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
*{
margin:0; padding:0;
}
body{
margin:100px;
}
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:300px;
padding: 10px;
border:1px solid #DCDCDC;
}
.task-content div{
display: none;
padding: 15px;
}
.task-content div.active{
display: block;
}
</style>
</head>
<body>
<ul class="task-list">
<li><a href="#all">所有任务</a></li>
<li><a href="#unfinished">未完成任务</a></li>
<li><a href="#finished">完成任务</a></li>
</ul>
<div class="task-content">
<div id="all" class="active">所有任务11</div>
<div id="unfinished">未完成任务22</div>
<div id="finished">完成任务33</div>
</div>
<script>
var hashStr;
function watchHash(){
var hash = window.location.hash.slice(1);
hashStr = hash;
console.log(hashStr);
if(hashStr){
$('#'+hashStr).show();
$('#'+hashStr).siblings().hide();
}
}
watchHash();
window.addEventListener("hashchange",watchHash);
</script>
</body>
</html>
附图: