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>
效果图 ：