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

崋果山 2018-04-25

展开全文

前言

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

一、利用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>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。

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

<%@ 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>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实现。

<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>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