hash和hashchange事件

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>

附图：

hash和hashchange事件

猜你喜欢