1

这是我的 html/css：http: //jsfiddle.net/StillD/bDMxs/

粉红色的盒子是我的投资组合项目。在它们下方，我想显示您单击的投资组合项目的详细信息（整个浏览器宽度）。因此，当您单击投资组合项目 1 时，我的整个投资组合下方带有我的页脚的 div 应该向下滑动，以便为投资组合项目 1 的详细信息腾出空间。该投资组合项目的这些详细信息应显示在此处。当您单击第 2 项时，第 1 项的详细信息应该会消失，而第 2 项的详细信息应该会出现。

这是一个使用此效果的网站（向下滚动到投资组合并单击一个项目）：

http://www.applove.se

我给这个网站背后的人发了邮件，他们给了我这个：

onclick="$('#name').slideDown();
$('#name2').slideUp(); 
$('html, body').animate({scrollTop: $('#name.offset().top }, 600);"

但我无法让它工作。我希望你们能帮助我！

4

2 回答 2

0

在这里工作演示http://jsfiddle.net/yyene/NHskg/3/

查询

$(document).ready(function(){
    $(".portfolio").click(function () {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top }, 600);
    });
    $(".close").click(function () {
        $('.description').slideUp();        
        $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
    });
});
于 2013-06-14T09:17:38.337 回答
0

示例站点所做的基本上是使用锚点（但带有 jquery 扭曲）。我建议从选项卡开始（在 jquery UI 中）并添加您想要的任何滑动效果。参考：http: //jqueryui.com/tabs/#default

于 2013-06-14T09:09:58.677 回答