jquery - 带有 css 菜单的单页站点，需要 javascript 来根据点击导航淡入和淡出内容

Question

我有一个带有 CSS 菜单的 HTML 页面。

我想让这个单页网站在单击 CSS 菜单时相关内容淡入淡出。

我希望能够保留一个 .active 类，以便用户可以看到导航栏显示的内容。

EG 因此，如果您单击“关于”，则名为“关于”的 div 会随着该部分的内容淡入（这必须是响应式内容区域）。当您然后单击联系人时，关于内容淡出并且联系人内容淡入。我不知道从哪里开始，请帮助。

我正在寻找的一个例子是这里http://www.farewelljr.com

我的页面在这里http://www.hogshouse.com/beardsonwheels/index.html

Answer 1

这是一个非常简单的例子。

这是代码：

function showContent(name) {
    $('#main .' + name).fadeIn(500);
}

$('#menu .link').click(function() {
    if ($(this).hasClass('active')) return false;
    var name = $(this).attr('id');
    var $visible = $('#main .content:visible');
    $('.active').removeClass('active');
    $(this).addClass('active');
    if ($visible.length == 0) showContent(name);
    else $visible.fadeOut(500, function() {    
        showContent(name);
    });
});

如果要使用 ajax 加载内容，可以执行以下操作：

function showContent(name) {
    var url = "/path/to/script";
    $.ajax({
        type:'GET',
        url: url,
        data:{data:name},
        success:function(data) {
            $('#main').html(data).fadeIn(500);
        }
    });
}