前言
关于页面切换，肯定有很多种方法，我这里只是记录我在学习过程中用到的可以用的方法
一、利用jQuery实现
首先利用bootstrap创建一个左侧的列表(不清楚bootstrap框架整么用，可以点击链接菜鸟教程，里面讲解很基础很详细)
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
在每个需要点击的 li 里面，都标有一个id，这是关键。然后在body中创建右侧主体内容div。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
每个内容的div里面，也有个 id，而且除了第一个div里没有style=”display: none”之外，其他都有，是因为我们进入页面的时候，直接就显示一个主界面，其他内容只在被触发时才显示。这儿有一个右侧主体内容的一个示例
关于公司
First NameLast NameUsername
1232
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
并不需要body、html标签这些。因为jsp:include page=”xxx.jsp”都是静态引入，在主界面加载的时候，就会把内容全部加载进去，相当于直接把代码放在各个div下面。
现在开始最重要的环节，就是把左侧菜单和右侧主体关联起来。利用jQuery实现。
$(document).ready(function() {
var temp = "none";
$("#li-one").click(function () {
openMatter(1);
});
$("#li-two").click(function () {
openMatter(2);
});
$("#li-three").click(function () {
openMatter(3);
});
$("#li-four").click(function () {
openMatter(4);
});
$("#li-five").click(function () {
openMatter(5);
});
$("#li-six").click(function () {
openMatter(6);
});
$("#li-seven").click(function () {
openMatter(7);
});
$("#li-eight").click(function () {
openMatter(8);
});
$("#li-nine").click(function () {
openMatter(9);
});
$("#li-ten").click(function () {
openMatter(10);
});
$("#li-eleven").click(function () {
openMatter(11);
});
function openMatter(obj) {
for (var i = 1; i < 12; i++) {
if (i == obj) {
temp = "block";
} else {
temp = "none";
}
document.getElementById("matter" + i).style.display = temp;
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
相当于触发点击事件的时候，修改各个div的display属性进行显示和隐藏。主要的是，每个数字必须连续，也就是假若你没有id=”matter10”这个div而直接就是id=”matter11”，那么切换效果就没有了，所以matter后面的数字必须连续。这样感觉有点繁琐，但又可以用。
还是贴一个效果图吧
二、SpringMVC控制切换
主要是把主界面中重要部分提取到各个子文件中去。看一下文件列表截图
先来浏览一下各个配置文件。
1.FileList.jsp文件：主要就是写一下链接，也不需要body等标签
2.topNav.jsp文件:头部导航栏文件
3.LeftList.jsp文件：左侧导航栏样式，就是把上一个方法的内容转移阵地
4.各个部分的主体内容：eg：Main.jsp。右侧其他主体内容也类似
好了，每个部分都弄完了。现在每个div里面都是没有id的，就是有左侧菜单栏截图中，有每个 li 的 a 链接，用于访问后台。下面就要预备跳转了。下面是SpringMVC控制层的编写截图
这就完成了跳转功能。最后看一下效果图
这种方法就是真正的页面之间的跳转，而不是第一种方法那样就在一个页面中实现；还有就是这种方法jsp界面内容比较少，因为把各个内容都分配到了子文件中去，每个文件都只显示自己的内容，并不需要加载其他模块的内容，这个可以在浏览器上右键查看源代码进行对比。
以上只是我在学习过程中的一些笔记，因为学习新知识的同时可能有更好的方法代替现在的方法，我就先记录下来了。文章内容比较繁琐，还请见谅。