效果图如下
一、完成整体布局（以下只有左侧菜单以及右侧网页）
<div class="content">
<div class="s-side">
<ul>
<!--这部分是导航栏信息。-->
<li class="s-firstItem first">
<a href="#">
<i class="fa fa-home"></i>
<span>首页</span>
</a>
</li>
<li class="first">
<div class="d-firstNav s-firstNav clearfix">
<i class="fa fa-bars"></i>
<span>选课管理</span>
<i class="fa fa-caret-right fr "></i>
</div>
<ul class="d-firstDrop s-firstDrop">
<li>
<div class="d-secondNav s-secondNav">
<i class="fa fa-minus-square-o"></i>
<span>选课信息管理</span>
<i class="fa fa-caret-right fr"></i>
</div>
<ul class="d-secondDrop s-secondDrop">
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/SelectLessonDeal.aspx')">选课信息处理</a>
</li>
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/SelectLessonSearch.aspx')">选课信息查询</a>
</li>
</ul>
</li>
<li>
<div class="d-secondNav s-secondNav">
<i class="fa fa-minus-square-o"></i>
<span>课程信息管理</span>
<i class="fa fa-caret-right fr "></i>
</div>
<ul class="d-secondDrop s-secondDrop">
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/LessonInfoDeal.aspx')">课程信息处理</a>
</li>
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/LessonInfoSearch.aspx')">课程信息查询</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="first">
<div class="d-firstNav s-firstNav">
<i class="fa fa-bars"></i>
<span>用户管理</span>
<i class="fa fa-caret-right fr"></i>
</div>
<ul class="d-firstDrop s-firstDrop">
<li>
<div class="d-secondNav s-secondNav">
<i class="fa fa-minus-square-o"></i>
<span>用户信息管理</span>
<i class="fa fa-caret-right fr "></i>
</div>
<ul class="d-secondDrop s-secondDrop">
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/UserInfoDeal.aspx')">用户信息处理</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="right">
</div>
</div>
二、利用Ajax完成动态刷新
方法一
<script>
function loadPage(url) {
$.ajax({
type: "POST",
url: url,
async: true,
dataType: "html",
contentType: 'application/json; charset=utf-8',
success: function (html) {
$('#right').html(html);
//$('#right').load(url);//load函数同样能实现效果
}
});
}
</script>
方法二
<script>
function loadPage(url) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$('#right').load(url);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
三、调用函数loadPage，并为其传递参数
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/LessonInfoDeal.aspx')">课程信息处理</a>
</li>
<li class="s-thirdItem">
<a href="#" onclick="loadPage('SubPages/LessonInfoSearch.aspx')">课程信息查询</a>
</li>
添加鼠标点击事件并传入参数地址（相对地址）
四、总结
1.关于$.ajax的使用
参数
type //数据的提交方式：get和post
url //数据的提交路径
async //是否支持异步，默认是true
data //需要提交的数据
dataType //服务器返回数据的类型，例如html、xml、Json、String等
success //请求成功后的回调函数
error //请求失败后的回调函数
2.ajax相比于iframe，布局上ajax更轻巧，用户体验上异步通信速度更快
3.缺点破坏了浏览器后退机制，存在一定安全隐患，浏览器不兼容
