p和li之间的应用上的区别
生活随笔
收集整理的這篇文章主要介紹了
p和li之间的应用上的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是自己寫的代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 <style> 7 *{margin:0;padding:0;} 8 9 .box{position:absolute; 10 margin-top:100px; 11 border:1px solid #999; 12 width:200px; 13 left:50%; 14 margin-left:-100px;} 15 .parent>li{ 16 height:30px; 17 line-height:30px; 18 list-style:none; 19 font-family:"微軟雅黑"; 20 font-weight:bolder; 21 background-color:#CCC; 22 border-bottom:1px solid #999; 23 } 24 25 .elements li { 26 height:30px; 27 list-style:none; 28 line-height:30px; 29 border-bottom:1px solid #999; 30 } 31 </style> 32 <script> 33 window.onload=function(){ 34 var oparent = document.getElementById('parent'); 35 var oul=oparent.getElementsByTagName(ul); 36 var oli=oparent.getElementsByTagName(li); 37 for(var i=0;i<oli.length;i++){ 38 } 39 40 } 41 42 </script> 43 </head> 44 <body> 45 <!--今天主動用到文字垂直方向上劇中的技巧；--> 46 <div class="box" id="box"> 47 <ul class="parent" id="parent"> 48 <li>Web前端</li> 49 <ul class="elements"> 50 <li>JavaSript</li> 51 <li>DIV+CSS</li> 52 <li>jquery</li> 53 </ul> 54 <li>后臺腳本</li> 55 <ul class="elements"> 56 <li>PHP</li> 57 <li>ASP</li> 58 <li>JSP</li> 59 </ul> 60 <li>前端框架</li> 61 <ul class="elements"> 62 <li>Ext js</li> 63 <li>Esspress</li> 64 <li>YUI</li> 65 </ul> 66 </ul> 67 </div> 68 </body> 69 </html>圖片是這樣的
demo的代碼是這樣的。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{margin:0; 8 padding:0; 9 font-size:13px; 10 list-style:none;} 11 12 .menu{width:210px; 13 margin:50px auto; 14 border:1px solid #ccc;} 15 16 .menu p{height:25px; 17 line-height:25px; 18 font-weight:bold; 19 background:#eee; 20 border-bottom:1px solid #ccc; 21 cursor:pointer; 22 padding-left:5px;} 23 24 .menu div ul{display:none;} 25 26 .menu li{height:24px; 27 line-height:24px; 28 padding-left:5px;} 29 </style> 30 <script type="text/javascript"> 31 window.onload=function(){ 32 var menu=document.getElementById('menu'), 33 ps=menu.getElementsByTagName('p'), 34 uls=menu.getElementsByTagName('ul'); 35 for(var i in ps){ 36 ps[i].id=i; 37 ps[i].onclick=function(){ 38 var u=uls[this.id]; 39 if(u.style.display=='block'){ 40 u.style.display='none'; 41 }else{ 42 u.style.display='block'; 43 } 44 } 45 } 46 } 47 </script> 48 </head> 49 <body> 50 <div class="menu" id="menu"> 51 <div> 52 <p>Web前端</p> 53 <ul style="display:block"> 54 <li>JavaScript</li> 55 <li>DIV+CSS</li> 56 <li>jQuery</li> 57 </ul> 58 </div> 59 <div> 60 <p>后臺腳本</p> 61 <ul> 62 <li>PHP</li> 63 <li>ASP.net</li> 64 <li>JSP</li> 65 </ul> 66 </div> 67 <div> 68 <p>前端框架</p> 69 <ul> 70 <li>Extjs</li> 71 <li>Esspress</li> 72 <li>YUI</li> 73 </ul> 74 </div> 75 </div> 76 </body> 77 </html> View Code動作效果是這樣的：
還有一個問題，這里的p和li直接有某種關系，點擊p,顯示p下面的li的這種跟隨關系，
如果將代碼寫成這樣的話：
1 var id=i; //零時創建的值；用來記錄i，但是demo寫的比較正規； 2 ps[i].οnclick=function(){ 3 var u=uls[id]; 4 if(u.style.display=='none'){ 5 u.style.display='block'; 6 }else{u.style.display='none'} 7 //上面的判斷語句不能只寫前半句，否則無法執行如果只是零時的值的話，最后會出現這樣的BUG
每一次點擊任意一個p標簽，都會顯示上面的結果，我也不知道他的深層原理是什么，先記下，以后遇到他的原理，再好好的學習一下。
?
轉載于:https://www.cnblogs.com/zhangwei1234/p/5779733.html
總結
以上是生活随笔為你收集整理的p和li之间的应用上的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 监控录像
- 下一篇： iOS - OC 术语表