A、
B、
本小白刚接触前端，有好些问题希望大神解答谢谢。A图是现今的情况，B图是要实现的效果。
for循环读取json生成的HTML，怎么将添加的HTML分别添加点击事件，然后分别将对应点击的数据插入到menu-middle内，并打开对应的网页。大谢各位大神，研究了两天就是不知道怎么动态实现这种效果谢谢
基本代码如下
横屏导航
body{
font-family:"微软雅黑";
color:white;
}
a:link{
color:white;
text-decoration:none;
}
a:visited{
color:white;
text-decoration:none;
}
a:hover{
color:white;
text-decoration:none;
}
a:active{
color:white;
text-decoration:none;
}
.wrapper{
width:100%;
height:100%;
background:#F2F2F2no-repeat;
position:absolute;
overflow:scroll;
min-width:1250px;
}
.top{
position:relative;
width:100%;
height:270px;
background:-webkit-linear-gradient(lefttop,#A0C4FC,#24B2A9);/*Safari5.1-6.0*/
background:-o-linear-gradient(bottomright,#A0C4FC,#24B2A9);/*Opera11.1-12.0*/
background:-moz-linear-gradient(bottomright,#A0C4FC,#24B2A9);/*Firefox3.6-15*/
background:linear-gradient(tobottomright,#A0C4FC,#24B2A9);/*标准的语法*/
background:-ms-linear-gradient(topleft,#A0C4FC,#24B2A9);/*兼容IE*/
text-align:center;
}
.main-header{
position:relative;
width:100%;
height:89px;
border-bottom:3pxsolidrgba(105,105,105,0.1);
margin:0auto;
}
.logo{
display:inline-block;
width:270px;
height:86px;
float:left;
line-height:80px;
font-size:24px;
text-shadow:03px9pxrgba(0,0,0,.5);/*文字阴影顺序为：阴影的X轴(可以使用负值)阴影的Y轴(可以使用负值)阴影模糊值（大小）阴影的颜色加inset可设置内阴影*/
-webkit-text-shadow:03px9pxrgba(0,0,0,.5);/*兼容谷歌*/
-moz-text-shadow:03px9pxrgba(0,0,0,.5);/*兼容火狐*/
-ms-text-shadow:03px9pxrgba(0,0,0,.5);/*兼容IE9以上*/
-o-text-shadow:03px9pxrgba(0,0,0,.5);/*兼容欧朋*/
}
.menu{
cursor:pointer;
outline:none;
list-style:none;
float:left;
font-size:18px;
display:inline-block;
font-family:"黑体";
}
.menuli,
.dj0{
float:left;
padding:30px40px;
display:inline-block;
height:86px;
border-collapse:collapse;
}
.menuli:hover,
.menuli:focus,
.dj1{
font-size:20px;
font-weight:bold;
background:rgba(255,255,255,0.1);
padding:30px50px;
transition-duration:0.6s;/*指定经过后动画过度时间*/
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
}
.menuli:active{
padding:35px60px;
}
.menu-right1{
float:left;
text-decoration:none;
outline:none;
list-style:none;
cursor:pointer;
}
.bigger{
font-size:20px;
}
.middle{
position:absolute;
width:90%;
height:calc(100%-140px);/*减去距离顶部的间隔防止底部多出出现垂直滚动条*/
top:129px;
left:5%;
overflow:hidden;
}
.middle1{
width:100%;
height:40px;
position:relative;
padding-left:50px;
padding-right:50px;
}
.menu-middleli{
float:left;
display:inline-block;
outline:none;
list-style:none;
border-collapse:collapse;
border-top-left-radius:6px;
border-top-right-radius:6px;
cursor:pointer;
padding:10px25px;
height:40px;
}
.changeBj{
background:#fff;
font-weight:bold;
color:#787878;
}
.middle2-a{
width:100%;
height:calc(100%-40px);
background:#FFF;
z-index:0;
position:absolute;
}
.show{
width:100%;
border:0;
height:100%;
position:absolute;
overflow:hidden;
}
.x{
float:right;
margin-left:10px;
border:0;
color:#CCCCCC;
}
.x:hover{
color:#787878;
}
.xx{
float:right;
margin-left:10px;
border:0;
color:#F0F0F0;
}
.yincang{
display:none;
}
.xianshi{
display:block;
}
smartME
分 -->
|
