tab學(xué)習(xí)中,發(fā)現(xiàn)點(diǎn)擊后,前面的內(nèi)容沒(méi)隱藏,代碼也一樣啊為什么~糾結(jié)死了
JS代碼
window.onload=function(){ var?title=document.getElementsByTagName("p"); ????????var?content=document.getElementsByTagName("ul"); ???????? ??????//?將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái) ????????for(var?i=0;i<title.length;i++){ ????????????title[i].name=i; ????????????title[i].onclick=function(){ ????????????????for(var?j=0;content<i.length;j++){ ????????????????????content[j].style.display="none"; ????????????????} ????????????????content[this.name].style.display="block"; ????????????} ????????} ?????//?遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件 ?????//?獲取點(diǎn)擊的標(biāo)題上的索引屬性,根據(jù)該索引找到對(duì)應(yīng)的列表 ?????//?判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來(lái) }
全部代碼
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> ????*{margin:0; ?????padding:0; ?????font-size:13px; ?????list-style:none;} .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;} .menu?div?ul{display:none;} .menu?li{height:24px; ?????????line-height:24px; ?????????padding-left:5px;} </style> <script?type="text/javascript"> window.onload=function(){ var?title=document.getElementsByTagName("p"); ????????var?content=document.getElementsByTagName("ul"); ???????? ??????//?將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái) ????????for(var?i=0;i<title.length;i++){ ????????????title[i].name=i; ????????????title[i].onclick=function(){ ????????????????for(var?j=0;content<i.length;j++){ ????????????????????content[j].style.display="none"; ????????????????} ????????????????content[this.name].style.display="block"; ????????????} ????????} ?????//?遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件 ?????//?獲取點(diǎn)擊的標(biāo)題上的索引屬性,根據(jù)該索引找到對(duì)應(yīng)的列表 ?????//?判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來(lái) } </script> </head> <body> <div?id="menu"> <div> <p>Web前端</p> <ul?style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>jQuery</li> </ul> </div> <div> <p>后臺(tái)腳本</p> <ul> <li>PHP</li> <li>ASP.net</li> <li>JSP</li> </ul> </div> <div> <p>前端框架</p> <ul> <li>Extjs</li> <li>Esspress</li> <li>YUI</li> </ul> </div> </div> </body> </html>
2015-10-28
?for(var?j=0;content<i.length;j++){