一、 核心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为服务器返回的页面。
运行结果如下: