html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容

这次给大家带来怎样操作js实现二级菜单点击显示当前内容，操作js实现二级菜单点击显示当前内容的注意事项有哪些，下面就是实战案例，一起来看一下。

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

html结构入下

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

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

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

下面是重要内容js

function 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教程其它相关文章！

html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容相关推荐

在JSP中，点击网页某个按钮或者超链接执行某些需要确认的命令时，弹出确认框如下效果：如果点击确定，则执行要操作的命令。如果点击取消则不执行。实现步骤： 1：在jsp，或者html
如下效果: 如果点击确定,则执行要操作的命令.如果点击取消则不执行. 实现步骤: 第1步在jsp,或者html页面的的<head></head>标签之间添加如下js代码: & ...
html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...
计算机二级office考试题库操作题,计算机二级考试MSOffice考试题库ppt操作题附答案...
请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作. 注意:以下的文件必须保存在考生文件夹下文慧是新东方学校的人力资源培训讲师,负责对新入职的教师进行入职培训,其PowerP ...
计算机二级15套Excel操作步骤,计算机二级Excel操作步骤
Excel函数与操作注意点: 1)引用类型的用法(F4可互换) 相对地址引用.绝对地址引用/混合引用.三维引用在涉及到填充的时候一定要考虑绝对地址和相对地址问题,其它采用默认. 2)题目要求数组则须 ...
（转）C#开发微信门户及应用(6)--微信门户菜单的管理操作
http://www.cnblogs.com/wuhuacong/p/3701961.html 前面几篇继续了我自己对于C#开发微信门户及应用的技术探索和相关的经验总结,继续探索微信API并分享相关的 ...
Markdown中如何实现内容折叠操作
Markdown中如何实现内容折叠操作当我们在Github中写太多内容时,进行适当的内容折叠是非常有必要的. 进行内容折叠的代码如下: <details> <summary> ...
Excel隐藏指定区域空单元格整行内容的操作！
今天要和大家分享的是,Excel隐藏指定区域空单元格整行内容的操作!比如下图中的A列学号内容是存在漏录入的情况的,如何将空白单元格的整行隐藏呢-- (方方格子插件) 1.先看动图演示吧 2.首先我们需 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单
纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...

html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容

html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容相关推荐

最新文章

热门文章