jquery load()方法实现局部刷新，多张网页切换（li标签实现上下页的切换）

---学习借鉴中---

（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);
});

jquery load()方法实现局部刷新，多张网页切换（li标签实现上下页的切换）

原文地址：https://www.cnblogs.com/nanju/p/10052966.html