嗨，我卡在这个问题上了。
我想实现一个 jquery 脚本，它会淡出我的内容 div， 更新 css 文件并在不重新加载页面的情况下淡入新内容。
这是目前的代码:
$(document).ready(function() {
//handle menu clicks
$('ul.navlist li a, .actlogo-link').click(function() {
var page = $(this).attr('href');
$('#home-container').fadeOut('slow', function(){
$('#main-container').load(page, function(){
$('#home-container').fadeIn('slow');
});
});
return false;
});
});
有什么想法吗？
HTML代码
<html>
<head>
<title>Sparks Production Services • File Not Found</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<div id="main-container">
<ul class="navlist">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="hello.html">Hello</a></li>
</ul>
<div id="home-container" style="height: 100px; margin-top:15px;">
<h1 align="center" style="padding-top:10px;">Whoops! This is embarrassing.</h1>
<h3 align="center" style="padding-top:10px;">Sorry, the page you are after cannot be found. </h3>
</div>
</div>
</body>
</html>
最佳答案
$('ul.navlist li a, .actlogo-link').click(function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#home-container').fadeOut('slow', function(){
$('#main-container').load(page, function(){
$('#home-container').fadeIn('slow');
});
});
return false;
});
});
关于jquery - 使用 JQuery、HTML 和 CSS 无需重新加载页面即可更改内容淡出/淡入和 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22470014/