---學習借鑑中---

（1）父頁面插入的位置

<div  id="content" > //id為要重新整理顯示的子頁面的內容
</div>

（2）父頁面顯示標籤切換不同html頁面

<ul class="userMenu">
 <li class="current" data-id="center">選擇基本資訊</li>
<li data-id="account">填寫實驗資訊</li>
<li data-id="exp_method_id">實驗原理</li>
<li data-id="exp_diagram_id">實驗圖</li>
<li data-id="exp_code_id">實驗核心程式碼</li>
<li data-id="exp_description_id">實驗功能程式碼</li>
<li data-id="exp_result_id">實驗結果分析</li>
</ul>

（3）子頁面上顯示上下頁的切換（在每個子頁面的顯示）

第一個子頁面：

  <ul class="userMenu">
  <li data-id="exp_result_id1"><span class="glyphicon glyphicon-backward"></span>上一頁&nbsp;&nbsp;&nbsp;&nbsp;</li>
  <li data-id="account1"><span class="glyphicon glyphicon-forward"></span>下一頁</li> 

  </ul>

第二個子頁面：

  <ul class="userMenu">
  <li class="current" data-id="center"><span class="glyphicon glyphicon-backward"></span>上一頁&nbsp;&nbsp;&nbsp;&nbsp;</li>
  <li data-id="exp_method_id"><span class="glyphicon glyphicon-forward"></span>下一頁</li>
</ul>

.....

（4）js程式碼：

$(function(){
$(".userMenu").on("click", "li", function(){
var sId = $(this).data("id"); //獲取data-id的值
window.location.hash = sId; //設定錨點
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;
var pathn, i;
switch(sId){
case "#center": pathn = "add/11.html"; i = 0; break; //需要切換的子頁面
case "#account": pathn = "add/22.html"; i = 1; break;
case "#exp_method_id": pathn = "add/33.html"; i = 2; break;
case "#exp_diagram_id": pathn = "add/44.html"; i = 3; break;
case "#exp_code_id": pathn = "add/55.html"; i = 4; break;
case "#exp_description_id": pathn = "add/66.html"; i = 5; break;
case "#exp_result_id": pathn = "add/77.html"; i = 6; break;
default: pathn = "add/11.html"; i = 0; break;
}
$("#content").load(pathn); //載入相對應的內容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //當前列表高亮
}
var sId = window.location.hash;
loadInner(sId);
});