hash和hashchange事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36671474/article/details/79975846

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>

附图:


阅读更多

没有更多推荐了,返回首页