这是前端代码，js代码在后面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="*/*" charset="UTF-8"> <script type="text/javascript" src="./src/test.js"></script> <title>Title</title> <style> div {width:100px; height:100px; display:block;} p,ui { padding: 0; marginn:0; list-style:none;} ul { padding: 0; marginn:0; list-style:none; display: none;} #box { font-size: 12px; color: #00c; width:58px; margin: 0 auto;} </style> </head> <body> <div> <img src="test.jpg" style="align-content: center"> </div> <div id="box"> <p>社会类</p> <ul> <li>1 </li> <li>2</li> <li>3</li> </ul> <p>自然类</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p>科学类</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
js代码
onload = function () { var oP = document.getElementsByTagName('p'); var oUl = document.getElementsByTagName('ul'); var i; for (i=0;i<oP.length;i++) { oP[i].index=i; oP[i].onclick = function () { if(oUl[this.index].style.display == 'block') { oUl[this.index].style.display='none'; } else { for(var i=0;i<oUl.length;i++) { oUl[i].style.display='none'; } oUl[this.index].style.display='block'; } } } }
