boostrap布局( 二)—后台布局实例(左侧菜单激活、右边页面切换)

实际项目效果如下:

选中左侧菜单,右边自动变换页面。默认选中Page1页面产品信息。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 布局实例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
              <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a class="icon-bar" href="#">mylastday系统</a>
                </li>
                <li><a href="#">菜单1</a>
                </li>
                <li><a href="#">菜单2</a>
                </li>
                <li><a href="#">菜单3</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a>欢迎您,admin</a>
                </li>
                <li><a href="#">安全退出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2" id="menulist">
            <a href="#" class="list-group-item active" onclick="loadPage('page1')">
                <!-- 小图标样式设置 -->
                产品信息</a>
            <a href="#" class="list-group-item" onclick="loadPage('page2')">
                大屏信息 </a>
            <a href="#" class="list-group-item" onclick="loadPage('page3')">
                用户管理</a>
            <a href="#" class="list-group-item">
                菜单4</a>
            <a href="#" class="list-group-item">
                菜单5</a>
            <a href="#" class="list-group-item">
                菜单6</a>
            <a href="#" class="list-group-item">
                菜单7</a>
        </div>
        <!--左边菜单栏-->
        <div class="col-sm-10" id="right">
            <ol class="breadcrumb">
                <li class="active">菜单
                </li>
                <li class="active">用户信息
                </li>
            </ol>

            <div class="panel panel-default">
                <div class="panel-heading">
                    搜索
                </div>
                <div class="panel-body">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="name">状态</label>
                            <select class="form-control">
                                <option>正常</option>
                                <option>禁用</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default">开始搜索</button>
                        </div>
                    </form>
                </div>
            </div>
            <!--
                列表展示
            -->
            <div class="table-responsive">
                <table class="table table-striped ">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>15</td>
                        <td>ZZZ</td>
                        <td>女</td>
                        <td>33</td>
                        <td>aaa@163.com</td>
                        <td>正常</td>
                        <td>
                            <div class="btn-group">
                                <a href="" class="btn btn-default">修改</a><a href="" class="btn btn-default">禁用</a><a href="" class="btn btn-danger">删除</a>
                            </div>

                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <ul class="pagination" style="float: right;">
                <li><a href="#">&laquo;</a>
                </li>
                <li class="active"><a href="#">1</a>
                </li>
                <li class="disabled"><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
                <li><a href="#">5</a>
                </li>
                <li><a href="#">&raquo;</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2019 &copy; mylastday.
    </p>
</div>
</body>
<script>
  /*
         * 对选中的标签激活active状态,对先前处于active状态但之后未被选中的标签取消active
         * (实现左侧菜单中的标签点击后变色的效果)
         */
        $(document).ready(function () {
            $('#menulist> a').click(function (e) {
                //e.preventDefault();    加上这句则导航的<a>标签会失效
                $('#menulist> a').removeClass('active');
                $(this).addClass('active');
            });
        });


    function loadPage(url) {
           $.get(url,function(data,status){
           $("#right").html(data);
  });
        }
</script>
</html>>

page1.html 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

        <div class="col-sm-12 column">
            <ol class="breadcrumb">
                <li class="active">菜单
                </li>
                <li class="active">产品信息
                </li>
            </ol>
            <table class="table">
                <thead>
                <tr>
                    <th>
                        编号
                    </th>
                    <th>
                        产品
                    </th>
                    <th>
                        交付时间
                    </th>
                    <th>
                        状态
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        01/04/2012
                    </td>
                    <td>
                        Default
                    </td>
                </tr>
                <tr class="success">
                    <td>
                        1
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        01/04/2012
                    </td>
                    <td>
                        Approved
                    </td>
                </tr>
                <tr class="error">
                    <td>
                        2
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        02/04/2012
                    </td>
                    <td>
                        Declined
                    </td>
                </tr>
                <tr class="warning">
                    <td>
                        3
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        03/04/2012
                    </td>
                    <td>
                        Pending
                    </td>
                </tr>
                <tr class="info">
                    <td>
                        4
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        04/04/2012
                    </td>
                    <td>
                        Call in to confirm
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
</body>
</html>

page2.html 效果如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-sm-11 column">
            <ol class="breadcrumb">
                <li class="active">菜单
                </li>
                <li class="active">大屏信息
                </li>
            </ol>
            <div class="jumbotron">
                <h1>
                    Hello, world!
                </h1>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout
                    called the hero unit and three supporting pieces of content. Use it as a starting point to create
                    something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

page3.html  效果如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <div class="col-sm-12" id="right">
        <ol class="breadcrumb">
            <li class="active">菜单
            </li>
            <li class="active">用户管理
            </li>
        </ol>

        <div class="panel panel-default">
            <div class="panel-heading">
                搜索
            </div>
            <div class="panel-body">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="name">状态</label>
                        <select class="form-control">
                            <option>正常</option>
                            <option>禁用</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default">开始搜索</button>
                    </div>
                </form>
            </div>
        </div>
        <!--
            列表展示
        -->
        <div class="table-responsive">
            <table class="table table-striped ">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>15</td>
                    <td>ZZZ</td>
                    <td>女</td>
                    <td>33</td>
                    <td>aaa@163.com</td>
                    <td>正常</td>
                    <td>
                        <div class="btn-group">
                            <a href="" class="btn btn-default">修改</a><a href="" class="btn btn-default">禁用</a><a href="" class="btn btn-danger">删除</a>
                        </div>

                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <ul class="pagination" style="float: right;">
            <li><a href="#">&laquo;</a>
            </li>
            <li class="active"><a href="#">1</a>
            </li>
            <li class="disabled"><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
            <li><a href="#">5</a>
            </li>
            <li><a href="#">&raquo;</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

3. 实际项目里的juery代码--激活菜单,切换页面

<script>
  /*
         * 对选中的标签激活active状态,对先前处于active状态但之后未被选中的标签取消active
         * (实现左侧菜单中的标签点击后变色的效果)
         */
        $(document).ready(function () {
            $('#menulist> a').click(function (e) {
                //e.preventDefault();    加上这句则导航的<a>标签会失效
                $('#menulist> a').removeClass('active');
                $(this).addClass('active');
            });
        });


    function loadPage(url) {
           $.get(url,function(data,status){
           $("#right").html(data);
  });
        }
</script>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值