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

标签：ram   break   加载   sid   current   menu   .data   def   ack   

---学习借鉴中---

（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标签实现上下页的切换）

标签：ram   break   加载   sid   current   menu   .data   def   ack   

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