Question

我为客户构建了一个单页网站，基本上它是<section>中的多个display:none;，除了当前浏览的网站之外，您使用标题切换视图菜单。

 $('header a').click(function(){
                var target = $(this).attr('href');
                $("#content > .visible").css('display', 'none').removeClass('visible');
                $(target).css('display', 'block').addClass('visible');
 });

所以它就像魅力一样，但我的客户要求我在更改视图时添加滚动效果... 有了这个当前的配置，我不知道如何使用我的display:none;系统来处理它，我真的很难打扰我的导航系统......

有没有人有任何想法？

Answer 1

您可能希望将fullPage.js用于单页滚动网站。

Answer 2

使用jQuery有一个简单的解决方案。有一些内置函数称为“隐藏”和“显示”，您可以将参数传递给。您应该能够将代码更改为：

$('header a').click(function(){
            var target = $(this).attr('href');
            $("#content > .visible").hide(1000).removeClass('visible');
            $(target).show(1000).addClass('visible');
});

1000是毫秒。如果你想要更多涉及的东西，.animate函数有比.hide和.show更多的选项。

单页导航和滚动效果

2 个答案: