JQUERY

Question

这是我的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);"

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

Answer 1

示例网站正在做的事情基本上是使用锚点（但是有一个jquery扭曲）。我建议从标签（在jquery UI中）开始，并添加你想要的任何滑动效果。参考：http://jqueryui.com/tabs/#default

Answer 2

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

JQUERY

$(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);
    });
});

点击，显示（幻灯片）投资组合使用的详细信息

2 个答案:

JQUERY