快捷導(dǎo)航

js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果

更新時(shí)間：2018年04月28日 10:04:30 作者：cdx1170776994

這篇文章主要介紹了js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近做了一個(gè)二級(jí)菜單點(diǎn)擊事件的效果，一級(jí)菜單有3個(gè)，二級(jí)菜單是固定的，而且html布局并不是父子級(jí)關(guān)系，具體請(qǐng)看效果圖如下

html結(jié)構(gòu)入下

<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>密碼恢復(fù)</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">網(wǎng)球</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">斯諾克/臺(tái)球</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內(nèi)寫你所需要展現(xiàn)的內(nèi)容
      <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樣式我這里就不一一羅列了，根據(jù)你自己頁(yè)面需求自己設(shè)計(jì)

下面是重要內(nèi)容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++){ //首先邊框一級(jí)菜單
    lis[i].index = i; //獲取三大玩法的下標(biāo)
    lis[i].onclick = function () { //一級(jí)菜單的點(diǎn)擊事件
      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循環(huán)利用排他思想顯示當(dāng)前點(diǎn)擊的選項(xiàng) 
      var x = this.index; //重點(diǎn)：第一次點(diǎn)擊的時(shí)候獲取到的下標(biāo)保存一個(gè)變量x
      var a_list = document.getElementsByClassName('A_list')[x]; //利用下標(biāo)獲取A_list[x]
      var aa_list = a_list.getElementsByTagName("div");//根據(jù)上一步獲取相應(yīng) 的子級(jí)div
      for(var j=0;j<ball.length;j++){ //進(jìn)行二級(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"; // 當(dāng)前的顯示
        }
      }
    }
  }
}
allGame();

這是一個(gè)簡(jiǎn)單的案例，小生入行不久，有什么不妥的地方歡迎大家指教。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: