js實(shí)現(xiàn)二級菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果
最近做了一個(gè)二級菜單點(diǎn)擊事件的效果,一級菜單有3個(gè),二級菜單是固定的,而且html布局并不是父子級關(guān)系,具體請看效果圖如下
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">斯諾克/臺球</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ù)你自己頁面需求自己設(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++){ //首先邊框一級菜單 lis[i].index = i; //獲取三大玩法的下標(biāo) lis[i].onclick = function () { //一級菜單的點(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) 的子級div for(var j=0;j<ball.length;j++){ //進(jìn)行二級菜單遍歷 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è)簡單的案例,小生入行不久,有什么不妥的地方歡迎大家指教。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
IFrame跨域高度自適應(yīng)實(shí)現(xiàn)代碼
最近在做項(xiàng)目中,遇到一個(gè)問題,就是iframe高度的自適應(yīng)問題,以下是解決辦法2012-08-08微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果
這篇文章主要介紹了微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果
這篇文章主要以實(shí)例的方式講解多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01JS實(shí)現(xiàn)用特殊符號替換字符串的中間部分區(qū)域的實(shí)例代碼
相信很多人都遇到過敏感信息需要做部分隱藏功能,大多數(shù)都是用特殊符號去替換。今天小編給大家?guī)砹薐S實(shí)現(xiàn)用特殊符號替換字符串的中間部分區(qū)域的實(shí)例代碼,需要的朋友參考下吧2018-07-07Javascript中獲取出錯(cuò)代碼所在文件及行數(shù)的代碼
之前在做一個(gè)Javascript的日志控制臺功能模塊,希望能夠在Javascript代碼出錯(cuò)時(shí)捕獲此錯(cuò)誤,并將出錯(cuò)的文件及相應(yīng)的行數(shù)打印到控制臺并匯報(bào)給服務(wù)器。2010-09-09javascript不同類型數(shù)據(jù)之間的運(yùn)算的轉(zhuǎn)換方法
這篇文章主要介紹了javascript不同類型數(shù)據(jù)之間的運(yùn)算的轉(zhuǎn)換方法,需要的朋友可以參考下2014-02-02