課程
/前端開發
/JavaScript
/Tab選項卡切換效果
是循環的問題嗎··
2016-12-13
源自：Tab選項卡切換效果 1-5
正在回答
不是。是你id的問題，注意到使用了一個for循環為每個p綁定了點擊事件，在for循環結束后，每個p標簽已經綁定了事件了。但是注意到你的i在內存中的值已經是3了，所以你每次都沒有效果，可以在每個節點上綁定一些數據。幫你修改了一個?？梢詤⒄找幌拢瑴y試過了是可以的
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>層疊下拉菜單</title> ????<style?type="text/css"> ?*{ ????????????margin:0;padding:?0;font-size:?20px;list-style:?none;text-decoration:?none;color:?black; ?} ????????.menu{ ????????????width:?210px;margin:50px?auto;border:?1px?solid?#ccc; ?} ????????.menu?p{height:?25px;line-height:?25px;font-weight:?bold;background:?:#eee;border-bottom:?1px?solid?#ccc;cursor:?pointer;padding-left:?5px;background:?#eee;} ????????ul{display:?none;} ????????.menu?li{height:?24px;line-height:?24px;padding-left:?5px;} ????</style> ????<script?type="text/javascript"> ?window.onload=function(){ ????????????var?p=document.getElementById('menu').getElementsByTagName('p'); ?var?ul=document.getElementById("menu").getElementsByTagName("ul"); ?for?(var?i?=?0;?i?<?p.length;?i++)?{ ????????????????p[i].id?=?i; ?p[i].onclick=function(){ ????????????????????for?(var?j?=?0;?j?<?ul.length;?j++)?{ ????????????????????????if?(j==this.id)?{ ????????????????????????????ul[j].style.display='block'; ?} ????????????????????????else{ ????????????????????????????ul[j].style.display?=?"none"; ?} ????????????????????} ????????????????} ????????????} ????????} ????</script> </head> <body> <div?class="menu"??id="menu"> ????<div> ????????<p>Web前端</p> ????????<ul> ????????????<li><a?href="#">?JavaScript</a></li> ????????????<li>Div+Css</li> ????????????<li><a?href="#">jQuery</a></li> ????????</ul> ????</div> ????<div> ????????<p>后臺腳本</p> ????????<ul> ????????????<li><a?href="#">PHP</a></li> ????????????<li>ASP?.net</li> ????????????<li><a?href="#">JSP</a></li> ????????</ul> ????</div> ????<div> ????????<p>前端框架</p> ????????<ul> ????????????<li><a?href="#">Extjs</a></li> ????????????<li>Esspress</li> ????????????<li><a?href="#">YUI</a></li> ????????</ul> ????</div> </div> </body> </html>
在每個節點上綁定了id，這樣就可以正確的得到了索引。
qq_慕斯卡4334448 提問者
串豬神 回復 qq_慕斯卡4334448 提問者
qq_慕斯卡4334448 提問者 回復 串豬神
舉報
本課程詳細介紹網頁頁面中最流行常用的tab切換效果
1 回答for循環問題
1 回答程序有問題，多循環一次。
3 回答for循環的使用
2 回答不能隱藏的問題，，，大神求解
1 回答求大神解答，js有點問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-12-13
不是。是你id的問題，注意到使用了一個for循環為每個p綁定了點擊事件，在for循環結束后，每個p標簽已經綁定了事件了。但是注意到你的i在內存中的值已經是3了，所以你每次都沒有效果，可以在每個節點上綁定一些數據。幫你修改了一個?？梢詤⒄找幌拢瑴y試過了是可以的
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>層疊下拉菜單</title> ????<style?type="text/css"> ?*{ ????????????margin:0;padding:?0;font-size:?20px;list-style:?none;text-decoration:?none;color:?black; ?} ????????.menu{ ????????????width:?210px;margin:50px?auto;border:?1px?solid?#ccc; ?} ????????.menu?p{height:?25px;line-height:?25px;font-weight:?bold;background:?:#eee;border-bottom:?1px?solid?#ccc;cursor:?pointer;padding-left:?5px;background:?#eee;} ????????ul{display:?none;} ????????.menu?li{height:?24px;line-height:?24px;padding-left:?5px;} ????</style> ????<script?type="text/javascript"> ?window.onload=function(){ ????????????var?p=document.getElementById('menu').getElementsByTagName('p'); ?var?ul=document.getElementById("menu").getElementsByTagName("ul"); ?for?(var?i?=?0;?i?<?p.length;?i++)?{ ????????????????p[i].id?=?i; ?p[i].onclick=function(){ ????????????????????for?(var?j?=?0;?j?<?ul.length;?j++)?{ ????????????????????????if?(j==this.id)?{ ????????????????????????????ul[j].style.display='block'; ?} ????????????????????????else{ ????????????????????????????ul[j].style.display?=?"none"; ?} ????????????????????} ????????????????} ????????????} ????????} ????</script> </head> <body> <div?class="menu"??id="menu"> ????<div> ????????<p>Web前端</p> ????????<ul> ????????????<li><a?href="#">?JavaScript</a></li> ????????????<li>Div+Css</li> ????????????<li><a?href="#">jQuery</a></li> ????????</ul> ????</div> ????<div> ????????<p>后臺腳本</p> ????????<ul> ????????????<li><a?href="#">PHP</a></li> ????????????<li>ASP?.net</li> ????????????<li><a?href="#">JSP</a></li> ????????</ul> ????</div> ????<div> ????????<p>前端框架</p> ????????<ul> ????????????<li><a?href="#">Extjs</a></li> ????????????<li>Esspress</li> ????????????<li><a?href="#">YUI</a></li> ????????</ul> ????</div> </div> </body> </html>在每個節點上綁定了id，這樣就可以正確的得到了索引。