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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 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
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
js实现验证码功能
2020/07/24 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python实现的彩票机选器实例
2015/06/17 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python语音识别实践之百度语音API
2018/08/30 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python如何生成xml文件
2020/06/04 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
新学期教师寄语
2014/04/02 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
小学开学标语
2014/07/01 职场文书
会计工作岗位职责
2015/02/03 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
运动会主持词大全
2015/07/02 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
cypress测试本地web应用
2022/06/01 Javascript
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android