實現點選左側選單改變右側內容的功能時，除了可以使用iframe,我們還可以通過ajax來實現。

先來看一下實現的效果：

實現思路：

一、首先我們來實現首頁的介面(我使用了bootstrap框架，來使介面更加好看)

新建一個html檔案，body裡的程式碼為下面的程式碼

<div class="container">
			<div class="col-sm-2" id="left-content">
				<div class="panel-group" id="accordion1">
					
					<!--我的訂單-->
					<div class="panel panel-default">
						<div class="panel panel-heading">
							<h4 class="panel-title" style="text-align: center;">
								<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">我的訂單</a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse">
							<div class="panel-body">
								<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('food_order')">美食訂單</a></div>
							</div>
						</div>
					</div>
					<!--我的評價-->
					<div class="panel panel-default">
						<div class="panel panel-heading">
							<h4 class="panel-title" style="text-align: center;">
								<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">我的評價</a>
							</h4>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse">
							<div class="panel-body">
								<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('rates')">待評價</a></div>
								<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('rated')">已評價</a></div>
							</div>
						</div>
					</div>
										
				</div>
			</div>
			<div class="col-sm-10" id="right-content">
				<div class="mainbox">
					
				</div>
			</div>
</div>
 

二、建立每個選單的顯示頁面

在主頁面中我們的左側選單裡3個小選單，因此我們來建立3個html檔案，分別命名為item1.html 、item2.html 、item3.html。

每個頁面的內容分別為頁面1、頁面2、頁面3

三、建立主頁面的js檔案（我使用了jquery.js（ps:之前很少用，一直用的js,誰知道面試工作的時候都問我會不會jquery，只好練習jquery了））

function turnpage(url) {
	var url0 = document.URL;
	var num = url0.indexOf('?');
	var oldurl;
	if(num == -1) {
		oldurl = url0;
	} else {
		oldurl = url0.slice(0, num);
	}
	var newurl = oldurl + '?' + url;
	history.pushState(null, null, newurl);
	var ajaxurl = url + '.html'
	$.ajax({
		type: "post",
		url: ajaxurl,
		success: function(html) {
			$('.mainbox').html(html);
		}
	});
}
 

這樣大致的功能就已經實現了。

如果右側每個頁面有自己的js和css檔案，不要緊的，照常寫在它自己的頁面或在它頁面中引入就可以，不必放在主頁面中。