前言

关于页面切换，肯定有很多种方法，我这里只是记录我在学习过程中用到的可以用的方法

一、利用jQuery实现

首先利用bootstrap创建一个左侧的列表(不清楚bootstrap框架整么用，可以点击链接菜鸟教程，里面讲解很基础很详细)

1

2

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”之外，其他都有，是因为我们进入页面的时候，直接就显示一个主界面，其他内容只在被触发时才显示。这儿有一个右侧主体内容的一个示例

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

并不需要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界面内容比较少，因为把各个内容都分配到了子文件中去，每个文件都只显示自己的内容，并不需要加载其他模块的内容，这个可以在浏览器上右键查看源代码进行对比。

以上只是我在学习过程中的一些笔记，因为学习新知识的同时可能有更好的方法代替现在的方法，我就先记录下来了。文章内容比较繁琐，还请见谅。