左栏导航 右栏内容显示

一、 核心iframe

方法一：改变元素显示、隐藏状态

<div style="width: 20%; float: left">
  <div id="butten" style="cursor: pointer;">
            左栏导航一
  </div>
  <div id="hidden" >
            左栏导航二
  </div>
</div>
<div id="page" style="width: 80%; float: right;">
      <iframe src="0.html" frameborder='0' style='border: 0; width: 100%; height:600px;'>    //右栏原始页面
      </iframe>
 </div>
<script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
      $(function () {
     $("#butten").click(function(){
      $("#hidden").show();
      $("iframe").attr("src", "1.html");
         });
        $("#hidden").click(function(){
          $("#butten").show();
          $("iframe").attr("src", "2.html");
        });
             });
       </script> 

代码分析：其中0.html页面是右栏页面的初始页面，点击左栏导航一 ,右栏显示1.html。点击左栏导航二，右栏显示2.html

运行结果如下：

方法二：关键词：target name

<div style="width: 20%; float: left">
    <ul class="nav" id="side-menu">
      <li>
        <a href=1.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="2.html" target="menuFrame">进货报表</a></li>
        </ul>
      </li>
      <li>
        <a href="2.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>仓库管理</b></a>
        <ul class="nav nav-second-level">
          <li><a href="1.html" target="menuFrame">商品列表</a></li>
          <li><a href="0.html" target="menuFrame">盘点</a></li>
        </ul>
      </li>
    </ul>
</div>
<div id="page_content">
  <iframe id="menuFrame" name="menuFrame" src="0.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="78%" height="600px; float:left">
  </iframe>
</div>

运行结果如下：

点击统计报表：

二 核心ajax

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

html代码：

#content是右栏主页，默认页面。再编写3个页面，questionA,questionB,questionC，分别为右栏刷新的页面。

<nav>
  <div class="top-container">
    <div class="fl">
      <a  href="1.html">XXXX.com</a>
    </div>
    <div class="top fr" >
      <ul>
        <li  class="fl"><a href="#" οnclick="showAtRight('questionA.html')"> 题库分类A</a></li>
        <li class="fl"><a href="#" οnclick="showAtRight('questionB.html')"> 题库分类B</a></li>
        <li  class="fl"><a href="#" οnclick="showAtRight('questionC.html')">题库分类C</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 左侧菜单选项========================================= -->
  <div class="left-content">
        <ul >
          <li id="AMeun"><a href="#" οnclick="showAtRight('questionA.html')"> 题库分类A</a></li>
          <li id="BMeun"><a  href="#" οnclick="showAtRight('questionB.html')"> 题库分类B</a></li>
          <li  id="CMeun"><a  href="#" οnclick="showAtRight('questionC.html')">题库分类C</a></li>
        </ul>

  </div>
<!-- 右侧内容展示==================================================   -->
<div class="right-content">
  <h2 >欢迎使用后台管理系统</h2>
  <!-- 载入左侧菜单指向的jsp（或html等）页面内容 -->
  <div id="content">
    <h4>
      <strong>使用指南：</strong>
      默认页面内容……
    </h4>
  </div>
</div>

jquery代码段如下:

<script type="text/javascript">
  /*
   * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
   * （实现左侧菜单中的标签点击后变色的效果）
   */
  $(document).ready(function () {
    $('#AMeun').click(function () {
      //e.preventDefault();	加上这句则导航的<a>标签会失效
        $(this).addClass('active')
         .siblings().removeClass("active");
    });
    $('#BMeun').click(function () {
      //e.preventDefault();	加上这句则导航的<a>标签会失效
        $(this).addClass('active')
         .siblings().removeClass("active");
    });
    $('#CMeun').click(function () {
      //e.preventDefault();	加上这句则导航的<a>标签会失效
      $(this).addClass('active')
        .siblings().removeClass("active");
    });
  });
  /*
   * 利用div实现左边点击右边显示的效果（以id="content"的div进行内容展示）
   * 注意：
   *   ①：js获取网页的地址，是根据当前网页来相对获取的，不会识别根目录；
   *   ②：如果右边加载的内容显示页里面有css，必须放在主页（即例中的1.html）才起作用
   *   （如果单纯的两个页面之间include，子页面的css和js在子页面是可以执行的。 主页面也可以调用子页面的js。但这时要考虑页面中js和渲染的先后顺序 ）
  */
  function showAtRight(url) {
    var xmlHttp;

    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlHttp=new XMLHttpRequest();	//创建 XMLHttpRequest对象
    }
    else {
      // code for IE6, IE5
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange=function() {
      //onreadystatechange — 当readystate变化时调用后面的方法
      if (xmlHttp.readyState == 4) {
        //xmlHttp.readyState == 4	——	finished downloading response
        if (xmlHttp.status == 200) {
          //xmlHttp.status == 200		——	服务器反馈正常
          document.getElementById("content").innerHTML=xmlHttp.responseText;	//重设页面中id="content"的div里的内容
        }
        //错误状态处理
        else if (xmlHttp.status == 404){
          alert("出错了☹   （错误代码：404 Not Found），……！");
          /* 对404的处理 */
          return;
        }
        else if (xmlHttp.status == 403) {
          alert("出错了☹   （错误代码：403 Forbidden），……");
          /* 对403的处理  */
          return;
        }
        else {
          alert("出错了☹   （错误代码：" + request.status + "），……");
          /* 对出现了其他错误代码所示错误的处理   */
          return;
        }
      }
    }
    //把请求发送到服务器上的指定文件（url指向的文件）进行处理
    xmlHttp.open("GET", url, true);		//true表示异步处理
    xmlHttp.send();
  }
</script>

代码分析：当服务器一切准备就绪，就像右侧内容的#content的div中添加内容。xmlHTTP.responseText为服务器返回的页面。

运行结果如下：