在URL中使用哈希值重新加載頁面（F5）

Question

如何保持hash值在url之內，並且即使在刷新頁面之後仍然保持標籤頁或div的打開狀態。下面是我的示例代碼：

$(document).ready(function() { 
 
\t jQuery(function($) { 
 
\t \t showTab(location.hash || "userView"); 
 
\t \t $("#nav a").click(function() { 
 
\t \t \t var hash = this.getAttribute("href"); 
 
\t \t \t if (hash.substring(0, 1) === "#") { 
 
\t \t \t \t hash = hash.substring(1); 
 
\t \t \t } 
 
\t \t \t window.location.hash = hash; 
 
\t \t \t showTab(hash); 
 
\t \t \t return false; 
 
\t \t }); 
 

 
\t \t function showTab(hash) { 
 
\t \t \t $(".displayUsers").hide(); 
 
\t \t \t switch (hash) { 
 
\t \t \t \t case "userView": ViewUsers(); break; 
 
\t \t \t \t case "userLogs": UserLogs(); break; 
 
\t \t \t \t case "addUser": AddUser(); break; 
 
\t \t \t } 
 
\t \t } 
 

 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel"> 
 
\t <dl id="nav"> 
 
\t \t <dt> 
 
\t \t \t <p>•<a href="#addUser" class="listLink"> ADD USER</a></p> 
 
\t \t </dt> 
 
\t \t <dt> 
 
\t \t \t <p>•<a href="#userLogs" class="listLink"> USER LOGS</a></p> 
 
\t \t </dt> 
 
\t \t <dt> 
 
\t \t \t <p>•<a href="#userView" class="listLink"> VIEW USERS</a></p> 
 
\t \t </dt> 
 
\t </dl> 
 
</div> 
 

 
<div id="addUser" class="displayUsers" hidden></div> 
 
<div id="userLogs" class="displayUsers" hidden></div> 
 
<div id="userView" class="displayUsers" hidden></div>

刷新頁面後，hash值被保存在url但當前活動div被設置爲默認值 - 隱藏。

Answer 1

您最好在showTab函數中解析hash。主要問題是，你發送hash或userView，但hash在那裏有#在開始。你解析它onClick但你不解析它onload。所以我將解析代碼移入showTab函數。

showTab(location.hash || "userView"); 
$("#nav a").click(function() { 
    var hash = this.getAttribute("href"); 
    showTab(hash); 
    return false; 
}); 

function showTab(hash) { 

    if (hash.substring(0, 1) === "#") { 
     hash = hash.substring(1); 
    } 
    window.location.hash = hash; 
    $(".displayUsers").hide(); 
    switch (hash) { 
     case "userView": 
      ViewUsers(); 
      break; 
     case "userLogs": 
      UserLogs(); 
      break; 
     case "addUser": 
      AddUser(); 
      break; 
    } 
} 

function ViewUsers() { 
    $("#userView").show(); 
} 

function UserLogs() { 
    $("#userLogs").show(); 
} 

function AddUser() { 
    $("#addUser").show(); 
} 

工作撥弄 https://jsfiddle.net/ergec/z02xzatj/