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

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

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();

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

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