• 1 • 2 • 3 • 4

text-center\"

• 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实现。

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

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