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

Question

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

我想将其设为单页网站，单击 CSS 菜单时相关内容会淡入淡出。

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

E.G. 因此，如果您单击“关于”，一个名为“关于”的 div 会随着该部分的内容淡入(这必须是响应式内容区域)。然后，当您单击“联系”时，“关于”内容会淡出，而“联系”内容会淡入。我不知道从哪里开始，请帮忙。

我正在寻找的示例在这里 http://www.farewelljr.com

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

Answer 1

这是一个very simple example.

这是代码:

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