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 相关文章推荐
js 控制图片大小核心讲解
Oct 09 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
js回调函数仿360开机
Dec 26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php单一接口的实现方法
2015/06/20 PHP
利用php生成验证码
2017/02/23 PHP
javascript add event remove event
2008/04/07 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
对Layer UI 模块化的用法详解
2019/09/26 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
使用python实现省市三级菜单效果
2016/01/20 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python如何生成各种随机分布图
2018/08/27 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
五年级数学教学反思
2014/02/11 职场文书
关于安全的演讲稿
2014/05/09 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2015年教务工作总结
2015/05/23 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS