单击链接我们时显示每个页面的内容

Question

这是显示单击按钮时不同div内容的示例。

麻烦： http : //jsfiddle.net/teddyrised/NHtvM/15/

我想在单击链接时显示不同页面的内容，而不是div。 不得出现滚动条。

页眉和页脚应保持固定。 这个怎么做？

JS：

$(function () {
    // Scroll to function
    function scrollTo(ele) {
        $("html, body").animate({
            scrollTop: $(ele).offset().top - $("header").outerHeight()
        });
    }

    // Detect location hash
    if (window.location.hash) {
        scrollTo(window.location.hash);
    }

    // Detect click event
    $("header a[href^='#']").click(function (e) {
        var target = $(this).attr("href");
        scrollTo(target);
        e.preventDefault();
    });
});

Answer 1

如果加载了内容，则可以隐藏显示所需内容。 如果按页面表示您是外部页面，则可以使用ajax调用来调用资源：

    $.ajax({
        url: "http://fiddle.jshell.net/user/login/",
        context: document.body
    }).done(function(data) {
        target.html(data);
        scrollTo(target);
    });

http://jsfiddle.net/2LCM4/