jQuery连接： https://pan.baidu.com/s/1Qj948NPMDmcqzcMyKm8nMw 密码：vewr
图片连接： https://pan.baidu.com/s/1Fhaw77EtQxC2Zgc6lY6y7g 密码：jyd1
HTML代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!--<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/font-awesome.min.css">--> <!-- 自定义样式 --> <link rel="stylesheet" href="assets/css/wx-custom.css"> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> *{ margin:0; padding:0; } .mmp > ul { display:none; } #ifram { border: none; display: block; outline: medium; /*background-color: white;*/ /*border: 1px solid red; height: 100%;*/ width: 100%; border: none; height: 100%; /*border: 1px solid black;*/ } ::-webkit-scrollbar { display: none; } .custom-menu-view__menu { border:none; } .subbutton__actived { border:none; } .weixin-msg-list table { width:99%; padding:0 2px; text-align:center; } .weixin-msg-list table tr td { border:1px solid #ddd; font-size:12px; } .weixin-msg-list table tr td a { font-size:12px; } .bb1 { background: -webkit-gradient(linear, 0 0, 0 100%, from(#6BBCF1), to(lightblue)); background: -webkit-linear-gradient(#6BBCF1, lightblue); background: -moz-linear-gradient(#6BBCF1, lightblue); background: -o-linear-gradient(#6BBCF1, lightblue); background: linear-gradient(#6BBCF1, lightblue); font-weight: bold; color: #564b4b; border: 1px solid white; width:48%; } .bb2 { background: -webkit-gradient(linear, 0 0, 0 100%, from(#6BBCF1), to(lightblue)); background: -webkit-linear-gradient(#6BBCF1, lightblue); background: -moz-linear-gradient(#6BBCF1, lightblue); background: -o-linear-gradient(#6BBCF1, lightblue); background: linear-gradient(#6BBCF1, lightblue); font-weight: bold; color: #564b4b; border: 1px solid white; width:25%; } .bb3 { background: -webkit-gradient(linear, 0 0, 0 100%, from(#6BBCF1), to(lightblue)); background: -webkit-linear-gradient(#6BBCF1, lightblue); background: -moz-linear-gradient(#6BBCF1, lightblue); background: -o-linear-gradient(#6BBCF1, lightblue); background: linear-gradient(#6BBCF1, lightblue); font-weight: bold; color: #564b4b; border: 1px solid white; width:20%; } .cc { background: -webkit-gradient(linear, 0 0, 0 100%, from(#6BBCF1), to(lightblue)); background: -webkit-linear-gradient(#6BBCF1, lightblue); background: -moz-linear-gradient(#6BBCF1, lightblue); background: -o-linear-gradient(#6BBCF1, lightblue); background: linear-gradient(#6BBCF1, lightblue); font-weight: bold; color: #564b4b; border: 1px solid white; } .aa { display: inline-block; *display: inline; *zoom: 1; width: 160px; height: 20px; line-height: 20px; font-size: 15px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } #bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); } #show { display: none; position: absolute; top: 20%; left: 6.5%; width:80%; height: 47%; padding: 8px; border: 8px solid #ddd; background-color: white; z-index: 1002; overflow: auto; } </style> </head> <body> <div class="custom-menu-view-con"> <div class="custom-menu-view"> <div class="custom-menu-view__title">公众号名称</div> <div class="custom-menu-view__body"> <div class="weixin-msg-list"> 我是第一页<br /> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th class="cc" >序号</th> <th class="bb1">标题</th> <th class="bb2">添加时间</th> <th class="bb3">操作</th> </tr> <tr> <td>1</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo('通过高转项目认定通过', '2018-05-04', '1200.45')">编辑</a> | <a href="#" style="text-decoration: none;" onclick=" delInfo(4)">删除</a></td> </tr> <tr> <td>2</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>3</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>4</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>5</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>6</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>7</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>8</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>9</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>10</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>11</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>12</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>13</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>14</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>15</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>16</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>17</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>18</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>19</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>20</td> <td><a href="#" title="通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>21</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo('通过高转项目认定通过', '2018-05-04', '1200.45')">编辑</a> | <a href="#" style="text-decoration: none;" onclick=" delInfo(4)">删除</a></td> </tr> <tr> <td>22</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>23</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>24</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>25</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> <tr> <td>26</td> <td><a href="#" title="通过高转项目认定通过高转项目认定通过高转项目认定" class="aa" onclick="openChild('1','/web_newszw/20180504094531052.html')">通过高转项目认定</a></td> <td>2018-05-04</td> <td><a href="#" style="text-decoration: none;" onclick="editInfo(4)">编辑</a> | <a href="#" style="text-decoration: none;" onclick="delInfo(4)">删除</a></td> </tr> </tbody> </table> </div> </div> <div id="menuMain" class="custom-menu-view__footer"> <div class="custom-menu-view__footer__left" onclick="changeinput();"></div> <div class="custom-menu-view__footer__right"> <div class="custom-menu-view__menu mmp1" alt="1" style="width:100%;display:none; "> <input type="text" style="width:99%;height:47px;float:left;font-size:26px;" /> <input type="hidden" value="0" id="hinput" /> </div> <div class="custom-menu-view__menu subbutton__actived mmp" alt="0" style="width: 32.5%;background:#ddd;"> <div class="text-ellipsis">今日歌曲</div> <ul class="custom-menu-view__menu__sub" id="ul1"> <li class="custom-menu-view__menu__sub__add" id="sub_0_0"> <div class="text-ellipsis" "> <a href="txt2.html">新建子菜单</a> </div> </li> <li class="custom-menu-view__menu__sub__add" id="sub_0_1"> <div class="text-ellipsis" onclick="changediv(1);"><a href="#">新建子菜单</a></div> </li> </ul> </div> <div class="custom-menu-view__menu mmp" alt="1" style="width: 32.5%;"> <div class="text-ellipsis" >百度一下</div> <ul class="custom-menu-view__menu__sub" id="ul2"> <li class="custom-menu-view__menu__sub__add" id="sub_1_0"> <div class="text-ellipsis" onclick="changediv(2);"><a href="#">新建子菜单</a></div> </li> <li class="custom-menu-view__menu__sub__add" id="sub_1_1"> <div class="text-ellipsis" onclick="changediv(2);"><a href="#">新建子菜单</a></div> </li> </ul> </div> <div class="custom-menu-view__menu mmp" alt="2" style="width: 32.5%;"> <div class="text-ellipsis" >菜单</div> <ul class="custom-menu-view__menu__sub" id="ul3"> <li class="custom-menu-view__menu__sub__add" id="sub_2_0"> <div class="text-ellipsis" onclick="changediv(3);"><a href="#">新建子菜单</a></div> </li> <li class="custom-menu-view__menu__sub__add" id="sub_2_1"> <div class="text-ellipsis" onclick="changediv(3);"><a href="#">新建子菜单</a></div> </li> <li class="custom-menu-view__menu__sub__add" id="sub_2_2"> <div class="text-ellipsis" onclick="changediv(3);"><a href="#">新建子菜单</a></div> </li> </ul> </div> </div> </div> </div> </div> <div id="bg"></div> <div id="show"> <div> <img src="assets/images/quxiao.png" style="width:35px;height:35px;float:right;" onclick="hidediv()" /> </div> <br /> <fieldset id="" style="border: 1px solid skyblue;height: 200px;margin-top: 20px;"> <legend style="margin-left: 10px;">详细信息</legend> <div class="inputRow" style="width: 100%; padding-top: 5px;height: 30px;"> 标题： <span id="spname"></span> </div> <div class="inputRow" style="width: 100%; padding-top: 5px;height: 30px;"> 时间： <span id="sptime"></span> </div> <div class="inputRow" style="width: 100%; padding-top: 5px;height: 30px;"> 价格： <span id="spprice"></span> </div> <div class="inputRow" style="width: 100%;height: 30px;"> </div> <div class="inputRow" style="width: 100%;display:none;"> <div class="bot" style="margin-top:1rem; "> <p style=""><button id="btnn" style=" width: 20%;height: 100%;background-color: #564b4b;color: white;border: none;outline: medium;border-radius: 20px;font-size: 20px; letter-spacing: 0.2rem;float: right;margin-right: 10px;" onclick="close()">关 闭</button></p> </div> </div> </fieldset> </div> <script src="../js/jquery-1.7.2.js"></script> <script> function editInfo(name, time, price) { $("#spname").text(name); $("#sptime").text(time); $("#spprice").text(price); document.getElementById("bg").style.display = "block"; document.getElementById("show").style.display = "block"; } function hidediv() { $("#spname").text(""); $("#sptime").text(""); $("#spprice").text(""); document.getElementById("bg").style.display = 'none'; document.getElementById("show").style.display = 'none'; } function changeinput() { var hid = $("#hinput").val(); if (hid=="0") { $("#hinput").val("1"); } else { $("#hinput").val("0"); } if ($("#hinput").val()=="1") { $(".mmp1").show(); } else { $(".mmp1").hide(); } } $(function () { for (i = 0, j = 0; i < 10, j < 6; i++, j++) { k = i + j; console.log(k); } for (var i = 0; i <= 90; i += 30) { console.log(i); } $("#ul1").hide(); $("#ul2").hide(); $("#ul3").hide(); $(".mmp").each(function (qq) { $(this).click(function () { //alert(qq) $(".mmp >ul").hide(); $(".mmp >ul").eq(qq).show(); $(".mmp").css({ "border": "none", "background": "white", }); $(".mmp").eq(qq).css({ "border": "0px solid skyblue", "background": "#ddd", }); }); }); }); function changediv(id) { if (id=="1") { window.location.href = "txt1.html"; } else if (id == "2") { window.location.href = "txt2.html"; } else if (id == "3") { window.location.href = "txt3.html"; } } // document.getElementById("ifram").src = newurl + lnglat + "&t" + Math.random(); </script> </body> </html>
效果图 ：
