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


Posted in Javascript onApril 28, 2018

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

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

html结构入下

<div>
  <ul>
    <li>您好!日期</li>
    <li class="li_list checked grounder">滚球</li>
    <li class="li_list">今日赛事</li>
    <li class="li_list">早盘</li>
    <li><img src="../img/live_tv_m.gif" alt=""></li>
    <li>更改密码</li>
    <li>密码恢复</li>
  </ul>
  <ul id="allBall">
    <li>账户历史</li>
    <li>|</li>
    <li>交易状况</li>
    <li class="ball foot">足球</li>
    <li>|</li>
    <li class="ball basketball">篮球/美式足球</li>
    <li>|</li>
    <li class="ball tentis">网球</li>
    <li>|</li>
    <li class="ball ">排球</li>
    <li>|</li>
    <li class="ball badminton">羽毛球</li>
    <li>|</li>
    <li class="ball ping-pong">乒乓球</li>
    <li>|</li>
    <li class="ball base">棒球</li>
    <li>|</li>
    <li class="ball table">斯诺克/台球</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="../roll_ball_index.html" frameborder="0" style="width: 1500px;height: 1000px;" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
      </div>
      <div></div> //div内写你所需要展现的内容
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="today" class="A_list">
      <div style="display: block"></div>
      <div></div>
      <div> </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="earlier" class="A_list">
      <div style="display: block"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

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.length;i++){ //首先边框一级菜单
    lis[i].index = i; //获取三大玩法的下标
    lis[i].onclick = function () { //一级菜单的点击事件
      for( var i=0;i<lis.length;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("div");//根据上一步获取相应 的子级div
      for(var j=0;j<ball.length;j++){ //进行二级菜单遍历
        ball[j].indexa = j;
        ball[j].onclick = function () { //同样的遍历 同样的排他思想
          for(var a=0;a<aa_list.length;a++){
            aa_list[a].style.display = "none"; //所有的div都隐藏
          }
          aa_list[this.indexa].style.display="block"; // 当前的显示
        }
      }
    }
  }
}
allGame();

这是一个简单的案例,小生入行不久,有什么不妥的地方欢迎大家指教。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Bootstrap基础学习
Jun 16 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
Angular工具方法学习
Dec 26 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Layui Form 自定义验证的实例代码
Sep 14 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 #Javascript
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
python实现红包裂变算法
2016/02/16 Python
python实现字符串和字典的转换
2018/09/29 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python取余运算符知识点详解
2019/06/27 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
大型晚会策划方案
2014/02/06 职场文书
报关专员求职信范文
2014/02/22 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
python3操作redis实现List列表实例
2021/08/04 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL