Question

如何在hash中保留url值，并在刷新页面后保持标签或div打开。这是我的示例代码：

＆＃13;

$( 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;
			}
		}

	});
});

＆＃13;

<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>

＆＃13;

刷新页面后，hash值保留在url中，但当前有效的div被设置为默认值 - 隐藏。

Answer 1

您最好在hash函数中解析showTab。主要问题是，您发送了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/

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

1 个答案: