HTML页面左侧菜单栏切换实现右侧主体内容改变

前言

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

一、利用jQuery实现

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

<!--左侧菜单栏-->
<div class="sidebar-nav">
<ul>
<li id="li-one" class="active nav-header collapsed" data-toggle="collapse">首页</li>
<!-- 根据data-target关联你的子列表 -->
<li data-target=".premium-menu" data-toggle="collapse" class="nav-header collapsed">列表一</li>
<li>
<ul class="premium-menu nav nav-list collapse">
<li id="li-two">    子列表-</li>
<li id="li-three">  子列表二</li>
<li id="li-four">   子列表三</li>
<li id="li-five">   子列表四</li>
<li id="li-six">    子列表五</li>
<li id="li-seven">  子列表六</li>
</ul>
</li>
<li id="li-eight" class="nav-header collapsed" data-toggle="collapse">列表二</li>
<li id="li-nine" class="nav-header collapsed" data-toggle="collapse">列表三</li>
<li id="li-ten" class="nav-header collapsed" data-toggle="collapse">列表四</li>
<li id="li-eleven" class="nav-header collapsed" data-toggle="collapse">列表五</li>
</ul>
</div>

在每个需要点击的 li 里面，都标有一个id，这是关键。然后在body中创建右侧主体内容div。

<!--右侧主体内容 用bootstrap的content类包含在一起-->
<div class="content">
<div id="matter1" >
<!--引入外部文件，即需要在右侧加载的内容-->
<jsp:include page="aboutCompany.jsp"/>
</div>

<div id="matter2" style="display: none">
<jsp:include page="collectingBills.jsp"/>
</div>

<!--
 ...........中间的都一样的，只不过加载的文件不一样而已
 -->
<div id="matter10" style="display: none">
<jsp:include page="salaryAccount.jsp"/>
</div>

<div id="matter11" style="display: none">
<jsp:include page="summaryBills.jsp"/>
</div>
</div>

每个内容的div里面，也有个 id，而且除了第一个div里没有style=”display: none”之外，其他都有，是因为我们进入页面的时候，直接就显示一个主界面，其他内容只在被触发时才显示。这儿有一个右侧主体内容的一个示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="header">
<h1 class="page-title">关于公司</h1>
</div>
<div class="main-content">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading no-collapse text-center" style="font-size: 20px">公司简介</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading no-collapse text-center" style="font-size: 20px">公司规章制度</div>
<div class="panel-body">这是内容</div>
</div>
</div>
</div>
</div>

并不需要body、html标签这些。因为jsp:include page=”xxx.jsp”都是静态引入，在主界面加载的时候，就会把内容全部加载进去，相当于直接把代码放在各个div下面。

现在开始最重要的环节，就是把左侧菜单和右侧主体关联起来。利用jQuery实现。

<script>
$(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;

 }
 }
});
</script>