管理平台的页面使用bootstrap框架。
目标：达到点击一个页面的三个选项卡，在该页面的div为content的组件中将 选项卡的页面加载进来。
这里我采用的是jquery，使用ajax异步交互，向服务端发送请求拿到页面，然后在本页面加入进来。
参考：http://blog.csdn.net/chelen_jak/article/details/34434431
主页的内容:
<!DOCTYPE html> <html> <head> <script src="webjars/jquery/3.1.1/jquery.min.js"></script> <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> function course(){ $.ajax( { url: "course", //这里是静态页的地址 type: "GET", //静态页用get方法，否则服务器会抛出405错误 success: function(data){ //var result = $(data).find("另一个html页面的指定的一部分"); $("#content").html(data); } }); } function userb(){ $.ajax( { url: "userb", //这里是静态页的地址 type: "GET", //静态页用get方法，否则服务器会抛出405错误 success: function(data){ //var result = $(data).find("另一个html页面的指定的一部分"); $("#content").html(data); } }); } function academy(){ $.ajax( { url: "academy", //这里是静态页的地址 type: "GET", //静态页用get方法，否则服务器会抛出405错误 success: function(data){ //var result = $(data).find("另一个html页面的指定的一部分"); $("#content").html(data); } }); } </script> <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" /> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div>上半部分文字---优课管理平台</div> <div> <ul> <!-- <li ><a href="table-userb.html" data-toggle="tab" οnclick="userb()"> 用户基本信息管理</a></li> data-toggle作用就是将href的效果取消，href效果使鼠标移动上去是小手掌，而不是罗马I --> <li ><a href="#" data-toggle="tab" οnclick="userb()"> 用户基本信息管理</a></li> <li><a href="#" data-toggle="tab" οnclick="course()">课程管理</a></li> <li><a href="#" data-toggle="tab" οnclick="academy()">学院管理</a></li> <!-- <li>左边菜单栏--标题1</li> <li>左边菜单栏--标题2</li> <li>左边菜单栏--标题3</li> --> </ul> </div> <div id = "content"> 中间内容部分</div> <div>底部logo相关</div> </body> </html>
要加载的页面table-course.html内容
<!DOCTYPE html> <html> <head> <script src="webjars/jquery/3.1.1/jquery.min.js"></script> <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> </script> <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" /> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 课程管理内容 </body> </html>服务端Controller内容：
@Controller public class BackCourseController { @GetMapping(value="/course") public String course() { return "table-course.html"; } }
