我的html5的hash管理既然会刷新页面，请问怎么处理，搞的我好郁闷啊


 <!DOCTYPE html>
<html><head><meta charset="utf-8" />
<link/>
<style type="text/css">
body {font: normal 12px/100% 'Microsoft YaHei', '宋体', Arial, Helvetica, sans-serif;color: #000}
ul, ol, li {list-style: none}
h1, form, div, p, i, ul, li, ol, body, dd, dl, dt {margin: 0;padding: 0}
img {border: 0}
a {text-decoration: none;}
a:hover {text-decoration: underline;color: red;}
form, fieldset {background: 0;border: 0;padding: 0;margin: 0;}
body {background: #011111;}
.indexHeader {width: 100%;height: 70px;margin: 0 auto;padding: 10px 0;}
.indexHeader nav {float: right;color: #60957a;line-height: 70px;padding: 0 4%;}
.indexHeader nav a {color: #60957a;}
.main {background:#00271d;width: 100%;overflow: hidden;top: 90px;position: absolute;bottom: 35px;}
.login {width: 500px;margin: 0 auto;position: fixed;top: 50%;left: 50%;margin: -171px 0 0 -250px;z-index: 1;}
.login fieldset {line-height: 45px;text-align: center;}
.login label {font-size: 16px;width: 15%;display: inline-block;color: #fff;text-align: left;}
.login input, .login select {padding: 5px;font-size: 14px;border: 1px solid #212121;border-radius: 5px;height: 24px;outline: none;box-shadow: 2px 2px 3px #8b9894 inset;background: #d0e2dd;width: 48%;line-height: 36px;}
.login select {height: 36px;width: 50.5%;color: #999;}
.login input:focus, .login select:focus {box-shadow: 0px 0px 0px 3px #1d8d70;border-radius: 4px;}
.login hgroup {color: #79a991;font-size: 16px;background: url(../img/login_tit.png) no-repeat center bottom;line-height: 40px;text-indent: 90px;margin: 10px 0;}
.login button {width: 252px;height: 42px;background: url(../img/login_b.png) no-repeat;text-align: center;font-size: 16px;color: #fff;border: 0;margin: 8px 17% 0 0;float: right;cursor: pointer;}
input.login_code {width: 29%;vertical-align: middle;}
.login_code_a {vertical-align: middle;display: inline-block;height: 35px;}
.login_code_a img {padding: 0 0 0 9px;}
.lobby {background:#00271d;width: 100%;overflow: hidden;position: absolute;top: 0px;bottom: 35px;}
.luzi {width: 80%;height: 100%;margin: -22% -40%;position: fixed;top: 50%;left: 50%;z-index: 1;}
.lobby nav {width: 100%;height: 45%;margin: 0px auto;}
.lobby .panel {width: 100%;height: 54%;margin: 1% 0 0 0;}
.lobby nav a {width: 10%;height: 33.3%;border-left: 3px solid #315149;border-top: 3px solid #315149;border-bottom: 3px solid #315149;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-transition: all 0.3s ease 0s;display: inline-block;font-size: 20px;font-weight: bold;color: #d6d7d7;text-decoration: none;line-height: 200%;text-indent: 1%;}
.lobby nav a:nth-child(10n) {border-right: 3px solid #315149;border-top: 3px solid #315149;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.lobby nav a:nth-last-child(1n+11) {border-bottom: 0px;}
.lobby nav a:hover, .lobby .lobby_open {background: #193d34;color: #f7d203;}
.lobby_tit {width: 100%;height: 16%;margin: 0px auto;overflow: hidden;}
.lobby_tit b {float: left;color: #fff;font-size: 18px;font-weight: bold;line-height: 20px;}
.lobby_tit i {color: #ffd802;font-size: 18px;font-weight: bold;line-height: 20px;}
.lobby_tit a {float: right;width: 95px;height: 32px;background:#000 no-repeat;display: inline-block;color: #fff;font-size: 18px;text-align: center;line-height: 30px;bblr: expression(this.onFocus=this.blur());outline-style: none;text-decoration: none;}
.lobbyPage,.playPage{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>



<script type="text/javascript">
    $(function(){
    $(".pagel").click(function(){
         hashobj(this);

    });

    $(".page2").click(function(){
         hashobj(this);
    });

    function hashobj(obj,ev){
         var hash=obj.dataset.hash;
         window.location.hash=hash;
    }

    window.onhashchange = function(){
        window.location.reload();
    };

    var firstHash = window.location.hash.substring(1) || '';

    if($(".indexPage").get(0).dataset.hash==firstHash){
        $(".lobbyPage").hide();
        $(".playPage").hide();
        $(".indexPage").show();

    }
    if($(".lobbyPage").get(0).dataset.hash==firstHash){
        $(".playPage").hide();
        $(".indexPage").hide();
        $(".lobbyPage").show();
    }
    if($(".playPage").get(0).dataset.hash==firstHash){
        $(".lobbyPage").hide();
        $(".indexPage").hide();
        $(".playPage").show();
    }
});
</script>



</head>
    <body>
        <!--登陆页-->
       <div class="indexPage">
        <header class="indexHeader">
            <nav><a href="javascript:;">简体</a> | <a href="javascript:;">繁体</a> | <a href="javascript:;">English</a></nav>
        </header>
        <section class="main">
            <article>
                    <form class="login">
                    <hgroup>會員登錄</hgroup>
                    <fieldset>
                        <label>用户名：</label><input type="text" placeh/older="用户名"><br>
                        <label>密码：</label><input type="password" place/holder="密碼"><br>
                        <label>网络：</label><select>
                                <option value="1">线路1</option>
                                <option value="2">线路2</option>
                                <option value="3">线路3</option>
                            </select><br>

                        <label>验证码：</label><input type="text" placeho/lder="驗證碼" class="login_code"><a href="javascript:;" class="login_code_a"><img src="img/code.jpg"></a><br>
                        <button>登 錄</button>
                        <a class="pagel" href="javascript:;" data-hash="lobby">跳转</a>
                    </fieldset>
                </form>
            </article>
        </section>    
        </div>

        <!--大厅页-->
       <div class="lobbyPage" data-hash="lobby">
           <section class="lobby">
            <article class="luzi">
            <nav id="lobby_nav">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a>
                <a>11</a><a>12</a><a>13</a><a>14</a><a>15</a><a>16</a><a>17</a><a>18</a><a>19</a><a>20</a>
                <a>21</a><a>22</a><a>23</a><a>24</a><a>25</a><a>26</a><a>27</a><a>28</a><a>29</a><a>30</a>
            </nav>
                <div class="panel">
                    <article class="lobby_tit">
                        <b>百家乐 <i class="table_number">12</i> 号台</b> <a class="page2" href="javascript:;" data-hash="play">进入</a>
                    </article>
                </div>
            </article>
        </section>
        </div>

        <!--游戏页-->
       <div class="playPage" data-hash="play">
        <section class="playbox">

        </section>
       </div>

    </body>

</html>

web前端开发 html5 jquery插件 JavaScript


share
三千院LEE 9 years, 8 months ago

Answers


 window.onhashchange = function(){
    window.location.reload();
};

这页面要是不刷新，我才郁闷呢…


share
am3pm4 answered 9 years, 8 months ago

附上我之前写的一个简单的路由控制器 


 // 路由控制器
var RouterController = (function(){
    var hash = location.hash,
        routes,
        link = {};

    function Router(routes){
        this.routers = routes || {};
    }

    Router.prototype.register = function(name, callback){
        var self = this,
            flag = false,
            hash;

        for(var key in self.routers){
            if(self.routers[key] == name) {
                hash = key;
                flag = true;
                break;
            }
        }

        if(flag){
            link[hash] = callback;
        }
    };

    function RunHash(){
        var hash = location.hash,
            startStr, endStr;

        (hash.length > 1) ? (startStr = 1) : (startStr = 0);
        (hash.indexOf("?") > 0) ? (endStr = hash.indexOf("?")) : (endStr = hash.length);


        hash = hash.substring(startStr, endStr);

        for(var key in link){
            if(hash == key != 0){
                link[key].apply(null);
            }
        }
    }

    window.addEventListener('hashchange', RunHash);

    Router.prototype.start = function(){
        RunHash();
    };

    return Router;

})();

    // 实例化并注册页面中的路由数
  var router = new RouterController({
        "" : "home",
        "blog" : "blog"
    });

   // 注册回调函数

   router.register("blog", function(){
     console.log("this is blog");
    });


   router.register("home", function(){
       console.log("this is home");
   });

share
阿风wind answered 9 years, 8 months ago

Your Answer

Ask Question
Related questions

css中背景图片如何自适应？

html5 audio在IOS上播放MP3为何只能播放一次

手机浏览器上js的preventDefaultde方法的使用

jquery ui draggable and dropping插件在firefox的问题

有哪些值得推荐的移动前端开发的书籍

jquery库和mootoos库同时使用问题，闭包出现报错了