左侧导航栏案例
引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); })();
