gpt4 book ai didi

javascript - 使用 Jquery 更改页面

转载 作者:行者123 更新时间:2023-11-28 13:04:46 29 4
gpt4 key购买 nike

所以我尝试使用散列来逐页设置动画。加载的第一页(主页)完美地淡入和淡出,但我试图进入的页面,测试(查看哈希值),根本不会动画/加载。这是为什么?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Jack Cook</title>
<style>
#navbar ul {
list-style-type: none;
display: block;
text-align: center;
}

#navbar ul li {
display: inline-block;
}

#navbar img {
width: 64px;
height: 64px;
padding: 0 10px 0 10px;
}

#navbar a img:hover {
opacity: 0.4;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
pages = {
"home": ["Home", "This is my homepage!", "<p>Homepage</p>"],
"test": ["Test", "This is a testing page", "<p>Testing</p>"]
};

page = window.location.hash != "" ? window.location.hash.substr(3) : "home";
update(page);

$(document).on("click", "a", function() {
if ($(this).attr("href").substr(0, 4) != "http") {
event.preventDefault();
window.location.hash = "!/" + $(this).attr("href");
}
});

$(window).on("hashchange", function () {
$("body").fadeOut(1000, function () {
update(window.location.hash);
});
});
});

function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page][2]);
$("body").fadeIn(2000);
}
</script>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="test"><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></a></li>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
</ul>
</div>

<div id="content"></div>
</body>
</html>

最佳答案

window.location.hash 将是 '#!/test'

试试这个:

var page = window.location.hash.replace('#!/', '');

update(page);

关于javascript - 使用 Jquery 更改页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15915123/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com