怎样操作js实现二级菜单点击显示当前内容

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

html结构入下

<p>
  <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>
</p>
<p id="container_main">
    <p id="roll" class="A_list">
      <p 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>
      </p>
      <p></p> //p内写你所需要展现的内容
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
    <p id="today" class="A_list">
      <p style="display: block"></p>
      <p></p>
      <p> </p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
    <p id="earlier" class="A_list">
      <p style="display: block"></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
  </p>

css样式我这里就不一一罗列了，根据你自己页面需求自己设计

下面是重要内容js

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

怎样使用Vue组件

如何使用vue弹窗消息组件

以上就是怎样操作js实现二级菜单点击显示当前内容的详细内容，更多请关注Gxl网其它相关文章！