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

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/