把三个页面代码放在一起，利用css的display控制显示隐藏？

如果用angular来做倒是很好实现的

同意 @TooBug 的方法，基本上就是点击的时候屏蔽掉默认跳转，然后使用 $.load 加载页面内容，该方法能非常方便的加载页面的部分内容，最后替换掉页面元素即可。我这里用原生的写一个 DEMO:

<p>我是本页内容</a>
<button href="http://xx.com/page/you_need_load" class="btn">载入下一页</button>

<script type="text/javascript">
function getHTML( url ) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest;
        xhr.responseType = "document";
        xhr.open("GET", url, true);
        xhr.onload = function() {
            xhr.status === 200 ? resolve( xhr.response ) : reject( Error( xhr.status ) );
        }
        xhr.onerror = function() {
            reject( Error( xhr.status ) );
        }
        xhr.send( null );
    })
}
function loadPage(e) {
    e.preventDefault();
    getHTML( this.href ).then( function( html ) {
        //可以直接复写整个页面的 HTML 代码，也可以复写一部分
        document.querySelector("html").outerHTML = html.outerHTML;
    } 
    this.removeEventListener("click", loadPage);
}
document.querySelector(".btn").addEventListener("click", loadPage);
</script>

提前把数据取出来，用CSS控制吧

三个页面同时加载到一个页面上，通过display来控制显示哪个。

可使用AngularJS