<ul class="nav" id="side-menu">
	<li>
		<a href="index.html" id="firstNode" class="cur" target="menuFrame"><i class="fa fa-bar-chart-o fa-fw"></i><b>統計報表</b></a>
		<ul class="nav nav-second-level">
			<li><a href="import.html" target="menuFrame">進貨報表</a></li>
			<li><a href="export.html" target="menuFrame">出貨報表</a></li>
			<li><a href="check.html" target="menuFrame">毛利報表</a></li>
		</ul>
	</li>
	<li>
		<a href="warehouse.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>倉庫管理</b></a>
		<ul class="nav nav-second-level">
			<li><a href="goodslist.html" target="menuFrame">商品列表</a></li>
			<li><a href="check.html" target="menuFrame">盤點</a></li>
			<li><a href="outbound.html" target="menuFrame">出庫列表</a></li>
			<li><a href="instorage.html" target="menuFrame">入庫列表</a></li>
		</ul>
	</li>
	<li>
		<a href="#"><i class="fa fa-edit fa-fw"></i><b>訂單管理</b></a>
		<ul class="nav nav-second-level">
			<li><a href="orderlist.html" target="menuFrame">訂單列表</a></li>
			<li><a href="forms.html" target="menuFrame">採購申請</a></li>
		</ul>
	</li>
	<li>
		<a href="system.html" target="menuFrame"><i class="fa fa-wrench fa-fw"></i><b>系統設定</b></a>
		<ul class="nav nav-second-level">
			<li><a href="user.html" target="menuFrame">許可權設定</a></li>
			<li><a href="personnel.html" target="menuFrame">資料管理</a></li>
		</ul>
		
	</li>
	<li>
		<a href="rewritepwd.html" target="menuFrame"><i class="glyphicon glyphicon-pencil"></i><b>修改密碼</b></a>
	</li>

</ul>
 

　　先寫出一個上菜的選單。 千萬記住連結後面的target得要，而且名字需要一樣，等會會用到

 <div id="page_content">
          <iframe id="menuFrame" name="menuFrame" src="index.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="100%; float:left">
             </iframe>
 </div>

　　在內容的區域新增上面程式碼，插入iframe, 這裡的name對應上面連結裡面的name, src="index.html", 表示預設頁是index.html, 至於後面的那些屬性是控制iframe樣式的。 以上iframe就告一段落了。

二. 用ajax方法實現點選左邊， 右邊出現相應的頁面。

今年老大叫我做一個後臺， 而且他指出別人沒有用iframe, 問我行不行。 只能說行。 沒有在網上檢視過多的資料， 某天晚上突然想起ajax 裡面有一個load方法， 這個方法可以載入其他頁面的內容。 於是有了靈感， 開始也只是嘗試一下：

("li").on('click', function() {
             var href = $(this).find("a").attr('href');
             $('#mainContents').empty();
             $('#mainContents').load("../new/" + href);
             //阻止跳轉
             $(this).parents('li').addClass('active').siblings('li').removeClass('active');
             return false;
         });
 

　　點選li, 找到li裡面對應的連結地址，阻止url跳轉，然後在內同區域載入找到的url對應的地址。 驚奇的發現，試驗了也可行。 然而新問題來了。 用load方法，只能載入已經載入完畢的頁面，如果我們的頁面沒有載入完畢呢， 或者修改了， 怎麼辦？？ 所以還是用ajax 吧。

var menu = $("#menuID>li h2"),
		srcLi = menu.next('ul').find('li');
	srcLi.on('click', function(e) {
		var href = $(this).find("a").attr('href');
		$('#mainContents').empty();
		$.ajax({
			//  beforeSend: function(){
			//      $('#mainContents').html('正在請求');
			//  },
			// complete: function(){
			//      $('#mainContents').html('載入完畢');
			//     },
			type: "GET",
			url: "../new/" + href,
			success: function(data) {
				$('#mainContents').append(data);
			}
		});
		//阻止跳轉
		$(this).parents('li').addClass('active').siblings('li').removeClass('active');
		return false;
	});
	menu.on('click', function() {
		$(this).next('ul').slideToggle(400);
		$(this).stop('false').toggleClass('on');
	});

　　以上的思路， 和開始時候的load方法一樣。首先找到每一個li 裡面對應的url, 然後清空 右側的內容， 用ajax動態獲取不同的頁面， 就追加到右側的內容中。 阻止跳轉。

另外，附上一個相似的程式碼，這是點選一個樹狀選單出來不同的內容。第一次用ajax呼叫json資料。著實小興奮了一把。這個與上面說的內容一毛錢的關係也沒有，只是為了祭奠一下我的第一次而已

$.ajax({
　　type: "post",
　　url: "../new/txt/txt1.json",
　　dataType: "json",
　　success: function(data) {
　　　　$("#blank").empty();
　　　　var employees = data.employees;
　　　　$.each(data.employees, function(k, v) {							
　　　　　　var tpl1 =
　　　　　　'<div class="halfLeft">' + '<span class="aboutJobs">' + v.職位 + '</span>: ' + '<span class="aboutNames">' + v.姓名 + '</span>;<br/>' + '</div>';
　　　　　　$("#blank").append(tpl1);
　　　　});
　　}
})

呼叫的json資料為

{
    "employees": [

    { "姓名": "張三", "職位":"php後臺", "email": "aaaa" },

    { "姓名": "李四", "職位":"人事經理", "email": "bbbb" },

    { "姓名": "王五", "職位":"Harold", "email": "cccc" },

    { "姓名": "Isaac", "職位": "Asimov", "genre": "science fiction" },

    { "姓名": "Tad", "職位": "Williams", "genre": "fantasy" },

    { "姓名": "Frank", "職位": "Peretti", "genre": "christian fiction" },

    { "姓名": "Eric", "職位": "Clapton", "instrument": "guitar" },

    { "姓名": "Sergei", "職位": "Rachmaninoff", "instrument": "piano" }
    ],

    "test": [

    { "姓名": "趙六", "職位":"php後臺", "email": "aaaa" },

    { "姓名": "齊七", "職位":"人事經理", "email": "bbbb" },

    { "姓名": "王五", "職位":"Harold", "email": "cccc" },

    { "姓名": "Isaac", "職位": "Asimov", "genre": "science fiction" },

    { "姓名": "Tad", "職位": "Williams", "genre": "fantasy" },

    { "姓名": "Frank", "職位": "Peretti", "genre": "christian fiction" },

    { "姓名": "Eric", "職位": "Clapton", "instrument": "guitar" },

    { "姓名": "Sergei", "職位": "Rachmaninoff", "instrument": "piano" }
    ]
}