-2

我正在查看此站点slideone，每当您单击链接时，它都会将内容加载到同一个容器/div/无论他们使用什么中。我想知道我是否可以在我的网站上获得类似的东西，但我不知道如何去做。有什么帮助吗？

4

2 回答 2

2

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

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

编辑

这是一个很好的链接，可以让你开始如何轻松地做这样的事情

编辑 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');
    });
});

​我为你创建了一个小提琴来展示它的基础是如何工作的。 这是我建立的小提琴示例

于 2012-11-30T04:27:31.707 回答
0

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

如果可以使用更简单的版本，您总是可以像在他们的网站中那样制作动画并滚动到不同的点，而不会发生其他事件

于 2012-11-30T04:32:56.923 回答