0

こんにちは私は自分のサイトに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

4

2 に答える 2

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;       
})
于 2012-07-13T12:05:04.770 に答える
1

コードを次のように更新します。

// 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;       
});
于 2012-07-13T12:06:28.980 に答える