内容淡出/淡入和 css 更改，无需使用 JQuery、HTML 和 CSS 重新加载页面答案

【问题标题】：Content fade out/fade in & css change without page reload using JQuery,HTML & CSS内容淡出/淡入和 css 更改，无需使用 JQuery、HTML 和 CSS 重新加载页面
【发布时间】：2014-04-23 13:57:59
【问题描述】：

嗨，我被困在这个问题上。

我想实现一个 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 &bull; 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>

【问题讨论】：

@Tamizh HTML 添加:)

标签： jquery html css fadein reload

【解决方案1】：

使用preventDefault()

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

【讨论】：