• 左侧导航栏案例


    引jq,style的js文件

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style>
            .head {
                background: #00a09e;
                height: 70px;
                line-height: 70px;
            }
            
            .head>.row::after {
                display: table;
                clear: both;
                content: '';
            }
            
            .head>.row>div {
                float: left;
            }
            
            .header_left>div {
                overflow: hidden;
            }
            
            .header_left>div>img {
                width: 100%;
                margin-top: 4%;
            }
            
            .header_right_o,
            .header_right_t {
                font-size: 12px;
                color: #fff;
            }
            
            .header_right_o span {
                display: block;
                max-height: 70px;
            }
            
            .header_right_t>center a {
                display: inline-block;
                color: #fff;
                text-decoration: none;
            }
            
            .header_right_t>center>span {
                display: inline-block;
                margin-right: 20px;
            }
            /*澶撮儴鐨勬牱寮�*/
            
            .content {
                background: #f5f5f5;
            }
            
            .sidebar_left {
                background: #fff;
                padding: 20px;
                border-radius: 10px;
                margin-top: 35px;
                min-height: 800px;
            }
            
            .sidebar_left>span {
                display: block;
                width: 80%;
                margin: 0 auto;
                border-radius: 10px;
            }
            
            .sidebar_left>span>img {
                width: 100%;
            }
            
            .sidebar_left p {
                font-size: 17px;
                margin-top: 15px;
                text-align: center;
            }
            
            #list {
                width: 100%;
                background-color: #fff;
            }
            
            ul#list,
            #list>li,
            #list>h2 {
                margin: 0;
                padding: 0;
                list-style: none;
                text-indent: 20px;
                list-style: none;
            }
            
            #list ul {
                list-style: none;
                padding: 0;
            }
            
            .item {
                display: none;
            }
            
            .item li {
                padding: 4px;
                cursor: pointer;
                font-size: 12px;
                margin-left: 10px;
            }
            
            #list h2 {
                font-size: 15px;
                color: #000;
                cursor: pointer;
            }
            
            .item .current {
                border-left: 1px solid green;
            }
            
            .sidebar_right {
                margin-top: 20px;
            }
            
            .sidebar_right .right_tt h3 {
                margin: 0;
                margin-bottom: 20px;
            }
            
            .right_pic {
                padding: 0;
            }
            
            .right_pic .pic_o span {
                display: inline-block;
            }
            
            .right_pic .pic_o span img {
                width: 100%;
                height: 183px;
            }
            
            .right_pic .pic_o label {
                width: 100%;
                font-size: 16px;
                line-height: 36px;
                color: #fff;
                background: #00a09e;
                border: none;
                border-radius: 5px;
            }
            
            .edit_left::after {
                display: table;
                clear: both;
                content: "";
            }
            
            .edit_left {
                margin: 20px auto;
            }
            
            .edit_left h4 {
                float: left;
                margin: 0;
                font-size: 24px;
            }
            
            .edit_left h4 a {
                font-size: 18px;
                color: #000;
                margin-left: 10px;
            }
            
            .edit_left div {
                float: right;
            }
            
            .edit_left div button {
                border: none;
                margin: auto 10px;
            }
            
            .all {
                padding: 0;
            }
        </style>
    
        <body style="padding-right: 0px;">
            <div class="content">
                <div class="row col-md-12 col-xs-12" style="background:#f5f5f5;">
                    <div class="col-md-2 col-xs-2" style="float: left;">
                        <div class="sidebar_left">
                            <div class="sidebar_content">
                                <ul id="list">
    
                                    <li style="list-style:none;">
                                        <h2>数据分析</h2>
                                        <ul class="item">
                                            <li>全局数据分析</li>
                                            <li>科室数据分析</li>
                                            <li>医生数据分析</li>
                                        </ul>
                                    </li>
    
                                    <li class='.list_li'>
                                        <h2>医生维护设置</h2>
                                        <ul class="item">
                                            <li clss="maintaindoc">医生维护系统</li>
                                        </ul>
                                    </li>
                                    <li class='.list_li'>
                                        <h2>导览图设置</h2>
                                        <ul class="item">
                                            <li>导览图管理</li>
                                            <li>导览图审核</li>
                                        </ul>
                                    </li>
    
                                    <li class='.list_li'>
                                        <h2>科室排班</h2>
                                        <ul class="item">
                                            <li>排班设置</li>
                                        </ul>
                                    </li>
    
                                    <li class='.list_li'>
                                        <h2>新闻管理</h2>
                                        <ul class="item">
                                            <li>发表文章</li>
                                            <li>文章管理</li>
                                            <li>文章审核</li>
                                        </ul>
                                    </li>
    
                                    <li class='.list_li'>
                                        <h2>字典设置</h2>
                                        <ul class="item">
                                            <li>父级设置</li>
                                            <li>子级设置</li>
                                        </ul>
                                    </li>
    
                                    <li class='.list_li'>
                                        <h2>时间段管理</h2>
                                        <ul class="item">
                                            <li>时间段设置</li>
                                            <li>医生对应时间段</li>
                                        </ul>
                                    </li>
                                    <li class='.list_li'>
                                        <h2>叫号系统</h2>
                                        <ul class="item">
                                            <li>叫号队列</li>
                                        </ul>
                                    </li>
                                    <li class='.list_li'>
                                        <h2>取号系统管理</h2>
                                        <ul class="item">
                                            <li>一号楼</li>
                                            <li>二号楼</li>
                                            <li>三号楼</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--            左边的部分-->
    
                    <div id='body_info' class="col-md-10 col-xs-10" style="height:800px;margin-top: 35px;background-color:#FFFFFF;">
                            
                    </div>
                </div>
            </div>
        </body>
    
    </html>
    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="style.js"></script>
    <script>
        $(function() {
            loadClickLI();
        });
        //加载
        function loadClickLI() {
            var type;
            $("#list li").find("li").click(function() {
                type = $(this).text();
                if(type == '医生维护系统') {
                    $("#body_info").load("doctorMaintain.jsp");
                } else if(type == '导览图管理') {
                    $("#body_info").load("hospitalAdministration.jsp");
                }else if(type == '医生数据分析') {
                    $("#body_info").load("physicianDataAnalysis.jsp");
                } else if(type == '一号楼') {
                    $("#body_info").load("fetchOnemanage.jsp");
                    $(this).attr('state', '1');
                } else if(type == '二号楼') {
                    $("#body_info").load("fetchOnemanage.jsp");
                    $(this).attr('state', '2');
                } else if(type == '三号楼') {
                    $("#body_info").load("fetchOnemanage.jsp");
                    $(this).attr('state', '3');
                }
            })
        }
    </script>

    style.js:

    (function() {
        var oul = document.getElementById('list');
        var oH2 = oul.getElementsByTagName('h2');
        var aul = oul.getElementsByTagName('ul');
        var aulList = [];
        for(var i = 0, h2Len = oH2.length; i < h2Len; i++) {
            aulList.push(aul[i]);
            oH2[i].index = i;
            oH2[i].onclick = function() {
                var that = this.index;
                for(var h = 0; h < aulList.length; h++) {
                    if(h != that) {
                        aulList[h].style.display = 'none';
                        oH2[h].className = '';
                    } else {
                        if(this.className == '') {
                            aul[that].style.display = 'block';
                            oH2[that].className = 'active';
                        } else {
                            aul[that].style.display = 'none';
                            oH2[that].className = '';
                        }
                    }
                }
            }
        }
        var liArr = [];
        for(var j = 0, aulLen = aul.length; j < aulLen; j++) {
            var ali = aul[j].getElementsByTagName('li');
            for(var k = 0; k < ali.length; k++) {
                liArr.push(ali[k]);
                ali[k].onclick = function() {
                    for(var m = 0; m < liArr.length; m++) {
                        if(liArr[m] != this) {
                            liArr[m].className = '';
                        }
                    }
                    if(this.className == '') {
                        this.className = 'current';
                    } else {
                        this.className = ' ';
                    }
                }
            }
        }
        // alert(liArr.length);
    })();
  • 相关阅读:
    Integrating AngularJS with RequireJS
    commonjs AMD,CMD
    JavaScript Module Pattern: In-Depth
    Javascript模块化编程(一):模块的写法
    Javascript模块化编程(三):require.js的用法
    Javascript模块化编程(二):AMD规范
    Log4J日志管理类使用详解 (转)
    细说JAVA反射
    test1
    test
  • 原文地址:https://www.cnblogs.com/fanting/p/9681980.html
Copyright © 2020-2023  润新知