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

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

为嘉定等地区用户提供了全套网页设计制作服务,及嘉定网站建设行业解决方案。主营业务为网站设计、成都网站建设、嘉定网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

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

html结构入下

  • 您好!日期
  • 滚球
  • 今日赛事
  • 早盘
  • 更改密码
  • 密码恢复
  • 账户历史
  • |
  • 交易状况
  • 足球
  • |
  • 篮球/美式足球
  • |
  • 网球
  • |
  • 排球
  • |
  • 羽毛球
  • |
  • 乒乓球
  • |
  • 棒球
  • |
  • 斯诺克/台球
  • |
  • 其他
//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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


分享文章:js实现二级菜单点击显示当前内容效果
路径分享:http://myzitong.com/article/pshggh.html