js实现二级菜单点击显示当前内容效果

最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且超文本标记语言布局并不是父子级关系，具体请看效果图如下

超文本标记语言结构入下

礼券列表分区您好！日期/Li Li class=' Li _ list checked grouper '滚球/li li class='li_list '今日赛事/li li class='li_list '早盘/Li Li g src=' http :/img/live_tv_m.gif' alt=''/li li更改密码/li li密码恢复/li /ul ul id='allBall' li账户历史/li li|/li li交易状况/Li Li='球脚'足球/li li|/li li class='篮球'篮球/美式足球/li li|/li li class='球潜力'网球/li li|/li li class='ball '排球/li li|/li li class='球羽毛球'羽毛球/li li|/li li class='乒乓球'乒乓球/li li|/li li class='球垒'棒球/li li|/li li class='球桌'斯诺克/台球/li li|/li li class='ball other '其他/Li/ul/div div id=' container _ main ' div id=' roll ' class=' A _ list ' div style=' display : block ' iframe src=' http :/roll _ ball _ index。html '框架边框=' 0 '样式='宽度： 1500 px'高度： 1000像素边框=' 0 '边距宽度=' 0 '边距热度=' 0 '滚动=' no ' allowtransparency=' yes '/iframe/div/div//div内写你所需要展现的内容分区/分区/样式我这里就不一一罗列了，根据你自己页面需求自己设计

下面是重要内容射流研究…

函数all game(){ var lis=document。queryselectorall(' .Li _ list’)；//获取三大玩法按钮var A _ list=文档。getelementsbyclassname(' A _ list ')；//获取三大赛事var ball=文档。getelementsbyclassname(' ball ')；//获取球类赛事for(var I=0；长度；i ){ //首先边框一级菜单lis[i].索引=我；//获取三大玩法的下标lis[i].onclick=function () { //一级菜单的点击事件for(var I=0；长度；i ){ lis[i].类名=a _ list[I]。风格。display=" none} this . NAmE=' checkeda _ list[this。索引]。风格。display=' block//用于循环利用排他思想显示当前点击的选项var x=this.index//重点：第一次点击的时候获取到的下标保存一个变量x var A _ list=文档。getelementsbyclassname(' A _ list ')[x]；//利用下标获取a _ list[x]var aa _ list=a _ list。getelementsbytagname(' div ')；//根据上一步获取相应的子级(var j=0；jball.lengthj ){ //进行二级菜单遍历球[j].indexa=j；球[j].onclick=function () { //同样的遍历同样的排他思想for(var a=0；aaa _ list.lengtha){ aa _ list[a]。风格。显示='无'；//所有的差异都隐藏} aa _ list[this。indexa]。风格。display=' block//当前的显示} } } } }所有游戏()；这是一个简单的案例，小生入行不久，有什么不妥的地方欢迎大家指教。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。