jquery - 简单的 AJAX 淡入淡出效果 + Loader + 当前类

Question

您好，我正在尝试将 ajax 功能添加到我的网站，并且可以正常使用此代码。只是现在我在获取fadeIn和fadeOut加载动画时遇到了麻烦。

这是我用 jQuery 编写的脚本代码：

$(document).ready(function() {

    // initial page load
    $('#content-div').load('details/default.html'); 

    // handle menu click
    $('ul#sidenav li a').click(function(){

        var page = $(this).attr('href');        
        $('#content-div').load('details/'+ page +'.html');  
        return false;       
    })

});

这是html标记：

<ul class="square sidebar-list" id="sidenav">
    <li><a href="default">Description</a></li>
    <li><a href="greenhill" class="current">greenhill</a></li>
    <li><a href="introduction">Introduction</a></li>
</ul>
<div id="content-div">                  
    <div id="loading">Loading...</div>
</div>

还想更改当前选定列表项的类sidenav

Answer 1

看看，是不是你要找的？

$('ul#sidenav li a').click(function(){
    $('#content-div').fadeOut();
    var page = $(this).attr('href');        
    $('#content-div').load('details/'+ page +'.html', function() {
       $('#content-div').fadeIn();
    });
    return false;       
})

Answer 2

将您的代码更新为：

// handle menu click 
$('ul#sidenav li a').click(function(){
    var page = $(this).attr('href');   
    $(this).removeClass('current');

    $('#content-div').fadeOut(200).load('details/'+ page +'.html', function(){
        $(this).fadeIn(200);
        $('#sidenav a[href='+page+']').addClass('current');
    });  

    return false;       
});