使用网址中的哈希值重新加载页面（F5）

Question

即使刷新页面后，如何保持hash值在url并保持选项卡或div打开。 这是我的示例代码：

 $( document ).ready(function() { jQuery(function($) { showTab(location.hash || "userView"); $("#nav a").click(function() { var hash = this.getAttribute("href"); if (hash.substring(0, 1) === "#") { hash = hash.substring(1); } window.location.hash = hash; showTab(hash); return false; }); function showTab(hash) { $(".displayUsers").hide(); switch (hash) { case "userView": ViewUsers(); break; case "userLogs": UserLogs(); break; case "addUser": AddUser(); break; } } }); }); 

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