Created
March 17, 2015 08:31
-
-
Save maolion/831bd8d76b0a5764bc9d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <meta http-equiv="Cache-Control" name="no-store" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <title>链接测试级--系统</title> | |
| <link rel="stylesheet" href="css/demo.css" /> | |
| <script src="js/jquery.min.js"></script> | |
| <script src="js/One.js"></script> | |
| <!-- <script type="text/javascript" src="js/two.js" ></script>--> | |
| <style> | |
| .topbanner{ | |
| background:darkgoldenrod; | |
| width: 100%; | |
| height: 90px; | |
| } | |
| *,html{ | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .leftnav{ | |
| background:red; | |
| width: 20%; | |
| height: 500px; | |
| float: left; | |
| } | |
| .leftnat{ | |
| background:blueviolet; | |
| width: 30%; | |
| height: 500px; | |
| float: left; | |
| } | |
| .rightwrap{ | |
| background:palevioletred; | |
| width: 80%; | |
| height: 500px; | |
| float: left; | |
| } | |
| .lefttt ul li { | |
| text-align: center; | |
| height: 35px; | |
| position: relative; | |
| top:30px; | |
| list-style-type:none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="topbanner"> | |
| <头部DIV> | |
| </div> | |
| <div style="background: black;width: 100%;height:500px;"> | |
| <form name="frm"> | |
| <div class="leftnav"> | |
| <div style="background: #FFFFFF;width: 100%;height: 40px;text-align: center;"> | |
| <span style="font-size: 15px;position: relative;top:10px;">一级菜单</span> | |
| </div> | |
| <div style="background: yellow;width: 100%;height: 300px;" class="lefttt"> | |
| <ul name="s1"> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="rightwrap"> | |
| <div class="leftnat"> | |
| <div style="background: #090;width: 100%;height: 40px;text-align: center;"> | |
| <span style="font-size: 15px;position: relative;top:10px;">二级菜单</span> | |
| </div> | |
| <div style="background:bisque;width: 100%;height: 300px;" class="lefttt"> | |
| <ul name="s2"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <script language="javascript"> | |
| //获取一级菜单长度 | |
| //var select1_len = document.frm.s1.options.length; | |
| //var select1_len=document.frm.s1.li.length; | |
| var data = [ | |
| { | |
| text : 'A1', | |
| value : 'A1', | |
| children : [ | |
| { | |
| text : 'A', | |
| value : 'A' | |
| }, | |
| { | |
| text : 'AA', | |
| value : 'AA' | |
| }, | |
| { | |
| text : 'AAA', | |
| value : 'AAA' | |
| } | |
| ] | |
| }, | |
| { | |
| text : 'B1', | |
| value : 'B1', | |
| children : [ | |
| { | |
| text : 'B', | |
| value : 'B' | |
| }, | |
| { | |
| text : 'BB', | |
| value : 'BB' | |
| }, | |
| { | |
| text : 'BBB', | |
| value : 'BBB' | |
| } | |
| ] | |
| }, | |
| { | |
| text : 'C1', | |
| value : 'C1', | |
| children : [ | |
| { | |
| text : 'C', | |
| value : 'C' | |
| }, | |
| { | |
| text : 'CC', | |
| value : 'CC' | |
| }, | |
| { | |
| text : 'CCC', | |
| value : 'CCC' | |
| } | |
| ] | |
| }, | |
| { | |
| text : 'D1', | |
| value : 'D1', | |
| children : [ | |
| { | |
| text : 'D', | |
| value : 'D' | |
| }, | |
| { | |
| text : 'DD', | |
| value : 'DD' | |
| }, | |
| { | |
| text : 'DDD', | |
| value : 'DDD' | |
| } | |
| ] | |
| } | |
| ]; | |
| var | |
| s1 = document.getElementsByName('s1')[0], | |
| s2 = document.getElementsByName('s2')[0] | |
| ; | |
| for (var i = 0, l = data.length; i < l; i++) { | |
| s1.appendChild(Li(data[i], i)); | |
| } | |
| s1.onclick = function(event){ | |
| var | |
| event = event||window.event, | |
| target = event.target || event.srcElement | |
| ; | |
| if (target.nodeName !== 'LI' || !target.data) { | |
| return; | |
| } | |
| s2.innerHTML = ''; | |
| var data = target.data; | |
| if (!data.children) { | |
| return; | |
| } | |
| for (var i = 0, l = data.children.length; i < l; i++) { | |
| s2.appendChild(Li(data.children[i], i)); | |
| } | |
| }; | |
| function Li(data, index) { | |
| var li = document.createElement('LI'); | |
| li.dataIndex = index; | |
| li.data = data; | |
| li.innerHTML = data.text; | |
| return li; | |
| } | |
| //var select2 = new Array(select1_len); | |
| // | |
| ////把一级菜单都设为数组 | |
| //for (i=0; i<select1_len; i++) | |
| //{ | |
| //select2[i] = new Array(); | |
| //} | |
| // | |
| ////定义基本选项 | |
| //select2[0][0] = new li("请选择", " "); | |
| // | |
| //select2[1][0] = new li("A", " "); | |
| //select2[1][1] = new li("AA", " "); | |
| //select2[1][2] = new li("AAA", " "); | |
| // | |
| //select2[2][0] = new li("B", " "); | |
| //select2[2][1] = new li("BB", " "); | |
| //select2[2][2] = new li("BBB", " "); | |
| // | |
| //select2[3][0] = new li("C", " "); | |
| //select2[3][1] = new li("CC", " "); | |
| //select2[3][2] = new li("CCC", " "); | |
| // | |
| // | |
| //select2[4][0] = new li("D", " "); | |
| //select2[4][1] = new li("DD", " "); | |
| //select2[4][2] = new li("DDD", " "); | |
| ////onChange="redirec(document.frm.s1.lis.selectedIndex)" | |
| ////联动函数 | |
| //function redirec(x) | |
| //{ | |
| //var temp = document.s2; | |
| //for (i=0;i<select2[x].length;i++) | |
| //{ | |
| //temp.li[i]=new li(select2[x][i].text,select2[x][i].value); | |
| //} | |
| //temp.li[0].selected=true; | |
| // | |
| //} | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment