console
var gdiv=document.getElementById('div1');
var gul=document.getElementById('menu');
var lis=gul.getElementsByTagName('li');
var dls=gul.getElementsByTagName('dl');
var giframe=document.getElementsByTagName('iframe')[0];
var arr=[['https://hao.360.com/',2,3,4],['a','b','https://www.huanqiu.com/','d'],[5,6,7,8]]
for (var i=0; i<lis.length; i++){
lis[i].index=i;
lis[i].onclick=function(){
for (var i=0; i<lis.length; i++){
lis[i].className="";
dls[i].style.display="none";
}
this.className="active";
dls[this.index].style.display="block";
var x=this.index;
var dds=dls[this.index].getElementsByTagName('dd');
for (var i=0; i<dds.length; i++){
dds[i].index=i;
dds[i].onclick=function(){
alert(x+'+'+this.index)
alert(arr[x][this.index])
giframe.src=arr[x][this.index];
}
}
}
}
lis[0].onclick();
<div id="div1">
<ul id="menu">
<li class="active">菜单1li</li>
<dl style="display:block;">
<dd>360</dd>
<dd>菜单1.dd</dd>
<dd>菜单1.dd</dd>
<dd>菜单1.dd</dd>
</dl>
<li>菜单2</li>
<dl>
<dd>菜单2.</dd>
<dd>菜单2.</dd>
<dd>菜单2.</dd>
<dd>菜单2.</dd>
</dl>
<li>菜单3</li>
<dl>
<dd>菜单3.</dd>
<dd>菜单3.</dd>
<dd>菜单3.</dd>
<dd>菜单3.</dd>
</dl>
</ul>
</div>
<iframe src="" width="500" height="500">
该网站使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。
</iframe>
#div1 {width:200px; margin:15px 0; line-height:25px;}
ul {list-style:none;}
li {background:#ccc;margin-bottom:3px;}
dl {background:#eee;display:none;
transform-origin:50% 0;
-webkit-animation:gary .5s ease-in;
transition: all .3s infinite;}
.active {background:#F90;}
dl dd:hover{
color:red;
}
@-webkit-keyframes gary{
0%{transform:scale(1,0);}
25%{transform:scale(1,1.2);}
50%{transform:scale(1,0.85);}
75%{transform:scale(1,1.05);}
100%{transform:scale(1,1);}
}