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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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 url路由入门实例
2014/04/23 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
js 省地市级联选择
2010/02/07 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
js实现五星评价功能
2017/03/08 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
express如何使用session与cookie的方法
2018/01/30 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
生产班组长岗位职责
2014/01/05 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
爱的承诺书
2015/01/20 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年质检工作总结
2015/05/04 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis