我的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>
最佳答案
0
a是有默认事件的，你没有阻止默认事件，所以就导致了刷新。
收获园豆：20
还是没用
$(".pagel").click(function(ev){
hashobj(this);
ev.preventDefault();
});
$(".page2").click(function(ev){
hashobj(this);
ev.preventDefault();
});
@Mi文: 你是在坑自己吧：
window.onhashchange = function(){ window.location.reload(); //想不刷新都难。 };
