二級菜單點選顯示目前内容

案例描述

最近做了一個二級菜單點選事件的效果，一級菜單有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=;i<lis.length;i++){  //首先邊框一級菜單
        lis[i].index = i;  //擷取三大玩法的下标
        lis[i].onclick = function () {  //一級菜單的點選事件
            for( var i=;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=;j<ball.length;j++){  //進行二級菜單周遊
                ball[j].indexa = j;
                ball[j].onclick = function () {  //同樣的周遊 同樣的排他思想
                    for(var a=;a<aa_list.length;a++){
                        aa_list[a].style.display = "none"; //所有的div都隐藏
                    }
                    aa_list[this.indexa].style.display="block"; // 目前的顯示
                }
            }
        }
    }
}
allGame();
           

這是一個簡單的案例，小生入行不久，有什麼不妥的地方歡迎大家指教。