崋果山 / html5 / HTML页面左侧菜单栏切换实现右侧主体内容...

分享

   

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

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

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>