zoukankan      html  css  js  c++  java
  • 关于HTML5中hash部分API在历史管理,选项卡自动跳转中的一点使用

    在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录部分,而点击注册去到登录页的注册部分,考虑之后发现可以利用html5中关于hash的一些API以及事件来进行处理,下面是代码

    HTML部分代码
    <body>
        <input type="button" value="选项一" data-hash = "one"/>
        <input type="button" value="选项二" data-hash = "two"/>
        <input type="button" value="选项三" data-hash = "three"/>
        <div data-content = "one" >1</div>
        <div data-content = "two">2</div>
        <div data-content = "three">3</div>
    </body>
    CSS代码
     input{ width: 100px; height: 24px; line-height: 24px;}
            div{width: 300px; height: 300px; background: #ccc;display: none;}
    JS代码
        $(function(){
            $('input').click(function () {
                window.location.hash = $(this).attr('data-hash');  //获取到input上的data-hash值给url上的hash
            });
            $(window).on("hashchange",function(){      //重点,监控hashchange,当hash值发生变化时触发
                hashChangeStyle();                      //显示需要显示的div
            }).trigger("hashchange");                   //页面加载之后触发一次hashchange以初始化
        });         
        function hashChangeStyle(){
            var hash = window.location.hash.substring(1)||"one";//截取掉#,并加上容错默认打开one
            $("div").hide().filter(":[data-content='"+hash+"']").show();   //通过data-conten和hash来控制需要显示的内容
        }

    看完代码之后,大家可以自己写个demo,把上面的代码直接复制下来,大家可以发现实现上面那个功能的主要思路

    1.  在点击按钮的时候把按钮相关的自定义属性值赋给hash
    2. 通过内容区的自定义属性的值跟页面url的hash值来做比对显示相对应的div
    3. 在页面的hash发生变化时即点击按钮的时再去显示相对应的div

    最后通过上面的方法我们可以实现浏览器本地的跳转,而且在复制了带有hash的域名在进行分享的时候,其他人打开带有hash的域名即可跳转到相应的选项卡, 并且还有历史记录的存在,可以通过浏览器的前进后退来进行控制噢。

  • 相关阅读:
    HDU 1813 Escape from Tetris
    BZOJ 2276 Temperature
    BZOJ 4499 线性函数
    BZOJ 3131 淘金
    HDU 5738 Eureka
    POJ 2409 Let it Bead
    POJ 1286 Necklace of Beads
    POJ 1696 Space Ant
    Fox And Jumping
    Recover the String
  • 原文地址:https://www.cnblogs.com/wangfajing/p/7201302.html
Copyright © 2011-2022 走看看