php点击菜单显示内容,js二级菜单点击后显示其中内容功能

这次给大家带来js二级菜单点击后显示其中内容功能，js二级菜单点击后显示其中内容的注意事项有哪些，下面就是实战案例，一起来看一下。

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

html结构入下

• 您好！日期
• 滚球
• 今日赛事
• 早盘
• 
• 更改密码
• 密码恢复

• 账户历史
• |
• 交易状况
• 足球
• |
• 篮球/美式足球
• |
• 网球
• |
• 排球
• |
• 羽毛球
• |
• 乒乓球
• |
• 棒球
• |
• 斯诺克/台球
• |
• 其他

css样式我这里就不一一罗列了，根据你自己页面需求自己设计

下面是重要内容jsfunction allGame() {

var lis = document.querySelectorAll('.li_list'); //获取三大玩法按钮

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

lis[i].className = '';

A_list[i].style.display="none";

}

this.className='checked';

A_list[this.index].style.display="block"; //for循环利用排他思想显示当前点击的选项

var x = this.index; //重点：第一次点击的时候获取到的下标保存一个变量x

var a_list = document.getElementsByClassName('A_list')[x]; //利用下标获取A_list[x]

var aa_list = a_list.getElementsByTagName("p");//根据上一步获取相应 的子级p

for(var j=0;j

ball[j].indexa = j;

ball[j].onclick = function () { //同样的遍历 同样的排他思想

for(var a=0;a

aa_list[a].style.display = "none"; //所有的p都隐藏

}

aa_list[this.indexa].style.display="block"; // 当前的显示

}

}

}

}

}

allGame();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：