我想知道是否可以在两个 HTML 文档之间进行淡入淡出。 我有一些 HTML 页面，但让我们用其中两个来做一个例子。
index.html, jobs.html
在两者上我都有一个菜单 <a>纽扣。我想做的是:
我点击<a href="jobs.html" id="jobs">Jobs</a>和index.html (我目前正在使用)淡出并 jobs.html淡入。类似 div 之间淡出的东西但带有整个 HTML 文档。
非常感谢任何帮助。
最佳答案
- 使用 CSS 隐藏正文。
- 淡入体内
- 点击按钮并获取其 ID
- 淡出正文
- 导航至新网址
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: none;
}
.myBtn{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
$('body').fadeIn();
$('.myBtn').click(function(){
url = $(this).attr('id') + '.html';
$('body').fadeOut(function(){
window.location = url;
});
});
});
</script>
</head>
<body>
<h1>index.html</h1>
<div class="myBtn" id="index">index</div>
<div class="myBtn" id="jobs">jobs</div>
</body>
</html>
关于javascript - 单击 anchor 时淡出并淡入 href，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18019183/