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

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

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 
 

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。