<!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