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 学习6 操纵元素显示效果的函数
Feb 07 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
js实现弹幕墙效果
Dec 10 Javascript
Nest.js 授权验证的方法示例
Feb 22 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解析json数据实例
2014/08/19 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php简单压缩css样式示例
2016/09/22 PHP
[JS]点出统计器
2020/10/11 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
基于vue展开收起动画的示例代码
2018/07/05 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Python正则捕获操作示例
2017/08/19 Python
python实现名片管理系统
2018/11/29 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python同时处理多个异常的方法
2020/07/28 Python
python3 re返回形式总结
2020/11/20 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
函数指针的定义是什么
2016/08/14 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
幼儿教师思想汇报
2014/01/10 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
教师专业自荐信
2014/05/31 职场文书
2014年政工师工作总结
2014/12/18 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
如何利用React实现图片识别App
2022/02/18 Javascript
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL