Question

嗨，我很困惑。

我想实现一个淡出我的内容div的jquery脚本，更新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 CODE

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

Answer 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;
    });
});

内容淡出/淡入＆amp;使用JQuery，HTML＆amp; amp; css在没有页面重新加载的情况下进行更改CSS

1 个答案: