首页 新闻 搜索 专区 学院

我的html5的hash管理既然会刷新页面这是怎么回事?????

0
悬赏园豆:20 [已解决问题] 解决于 2015-03-10 11:28
<!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>
Mi文的主页 Mi文 | 初学一级 | 园豆:6
提问于:2015-02-13 16:00
< >
分享
最佳答案
0

a是有默认事件的,你没有阻止默认事件,所以就导致了刷新。

收获园豆:20
幻天芒 | 高人七级 |园豆:36652 | 2015-02-14 08:53

   还是没用

  

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

 

Mi文 | 园豆:6 (初学一级) | 2015-02-14 09:50

@Mi文: 你是在坑自己吧:

window.onhashchange = function(){
        window.location.reload(); //想不刷新都难。
};
幻天芒 | 园豆:36652 (高人七级) | 2015-02-14 10:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册