最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且html布局并不是父子级关系，具体请看效果图如下
html结构入下
- 您好！日期
- 更改密码
- 密码恢复
- 账户历史
- |
- 交易状况
- |
- |
- |
- |
- |
- |
- |
- |
@H_404_52@
@H_404_52@ //div内写你所需要展现的内容
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
@H_404_52@
css样式我这里就不一一罗列了，根据你自己页面需求自己设计
下面是重要内容js
获取三大玩法按钮
var A_list = document.getElementsByClassName('A_list');//获取三大赛事
var ball = document.getElementsByClassName("ball"); //获取球类赛事
for(var i=0;i菜单
lis[i].index = i; //获取三大玩法的下标
lis[i].onclick = function () { //一级菜单的点击事件
for( var i=0;i显示当前点击的选项
var x = this.index; //重点：第一次点击的时候获取到的下标保存一个变量x
var a_list = document.getElementsByClassName('A_list')[x]; //利用下标获取A_list[x]
var aa_list = a_list.getElementsByTagName("div");//根据上一步获取相应 的子级div
for(var j=0;j菜单遍历
ball[j].indexa = j;
ball[j].onclick = function () { //同样的遍历 同样的排他思想
for(var a=0;a显示
}
}
}
}
}
allGame();
@H_404_52@
这是一个简单的案例，小生入行不久，有什么不妥的地方欢迎大家指教。
原文链接：https://www.f2er.com/js/32587.html