Question

我正在查看此网站slideone，每当您点击链接时，它会将内容加载到同一容器/ div /中。我想知道我是否可以在我的网站上得到这样的东西，但我不知道如何去做这件事。有什么帮助吗？

Answer 1

隐藏和展示内容的混合物。当您与加载另一个部分的链接进行交互时，会发生以下情况：

请求通过ajax发送到服务器，服务器发送回html。
淡出父级内容，并将从服务器收到的HTML附加到隐藏的div中
Fadein新内容
看起来棒极了

修改

Here is great link to get you started on how to do something like this really easily

编辑2：这是jQuery工作的主旨：

$(function(){
    $(".exposer").click(function(){
        var $ele = $(this);
        $ele.parent().siblings().hide('fade');
        if($(this).data('url') == undefined){
       $(this).siblings('.visContent').hide('slide')
           $(this).siblings('.hidContent').show('slide'); 
        }else{
            var url = $(this).data('url');
            $.ajax({
                url: '/echo/json',
                type: "GET",
                success:function(data){
                    var dt = new Date();
                    data = "You would have loaded HTML from " + url + ".<br /> This was loaded at " + dt;
                    //You would normally use the HTML from data to populate the html
                    //in this example a pre-built string will suffice
                    console.log(data,$ele, url);
               $ele.siblings('.visContent').hide('slide');
               $ele.siblings('.hidContent').append("<div class='ajaxload'>" + data + "</div>").addClass('ajaxload').show('slide');            
                },error:function(xhr, status){
                  alert('error loading page');
                }                    
            })
        }
    });
    $(".closer").live('click',function(){
        $(".ajaxload").hide('fade');
       var $mainp = $(this).parent().parent(); 
        $(this).parent().hide('slide');
        $(this).parent().parent().children('.visContent').show('slide');
                $(this).parent().parent().siblings('.childWrap').show('slide');
    });
});

我为你创造了一个小提琴，展示了它的基本功能。 Here is the fiddle example I've built

Answer 2

This jQuery waypoints plugin是一个很好的起点，它使您能够轻松监控滚动，在某个点触发ajax事件，触发事件以更改在某些滚动点的菜单中选择的内容。

如果更简单的版本没问题，你可以随时动画并滚动到与其网站不同的点，而不会发生其他事件

jQuery / Ajax这个网站如何实现这个目标？

2 个答案: