<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>管理系统</title>
<script src="js/jq.3.2.1.js"></script>
<style>
body,ul,li,*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,dl,ol{list-style: none;}
.nav{ width: 100%;height: 20%;background: aquamarine;font-size: 20px;text-align: center;font-weight: bold;}
.cont{ width: 100%;height: 80px;background: #ccc;}
.cont .co-li{float: left;width: 30%;height: 1000px;background: #a0d3e8;}
.cont .co-ri{float: right;width: 70%;height: 1000px;background: #2a5d84;}
.co-li ul {margin: 80px 0 0 180px;}
.co-li ul li{margin: 50px 50px;}
</style>
</head>
<body>
<div class="box">
<div class="nav">管理系统界面</div>
<div class="cont">
<div class="co-li">
<ul>
<li><a>添加教师</a></li>
<li><a>添加学生</a></li>
<li><a>添加课程</a></li>
<li><a>添加成绩</a></li>
</ul>
</div>
<div class="co-ri"></div>
</div>
</div>
<script>
$(document).ready(function(){
$(".co-li ul li").click(function(){
$(".co-ri").load("tea-add.php")
});
});
</script>
</body>
</html>第一次刷新；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jq.3.2.1.js"></script>
<title>添加教师</title>
<style>
.teacher{width: 80%;height: 100%;}
</style>
</head>
<body>
<div class="teacher">
<form action="" method="get">
教师名称：<input type="text" name="tea-name"/><br>
<input class="add" type="submit" value="提交"/>
</form>
</div>
<script>
$(document).ready(function(){
$(".add").click(function(){
alert(123)
$(".co-ri").load("manage.html");
});
});
</script>
</body>
</html>
第二次空白页
赫本女神
晚安sp