tab學習中,發現點擊后,前面的內容沒隱藏,代碼也一樣啊為什么~糾結死了
JS代碼
window.onload=function(){ var?title=document.getElementsByTagName("p"); ????????var?content=document.getElementsByTagName("ul"); ???????? ??????//?將所有點擊的標題和要顯示隱藏的列表取出來 ????????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"; ????????????} ????????} ?????//?遍歷所有要點擊的標題且給它們添加索引及綁定事件 ?????//?獲取點擊的標題上的索引屬性,根據該索引找到對應的列表 ?????//?判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來 }
全部代碼
<!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"); ???????? ??????//?將所有點擊的標題和要顯示隱藏的列表取出來 ????????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"; ????????????} ????????} ?????//?遍歷所有要點擊的標題且給它們添加索引及綁定事件 ?????//?獲取點擊的標題上的索引屬性,根據該索引找到對應的列表 ?????//?判斷該列表,如果是顯示的則將其隱藏,如果是隱藏的則將其顯示出來 } </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>后臺腳本</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++){