js實例入門(簡單展開或關閉)

2019-11-21 01:33:35

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>簡直的展開或關閉</title> <style type="text/css"> .hide{display:none;} .show{display:block;} .hand{cursor:pointer;} .text{padding:10px;background:F3FCFF;line-height:1.3em;border:solid 5px B2DCF9;margin-bottom:7px;} </style> <script type="text/javascript"> /*根據點擊項，動態加載內容至iframe中 expand(展開),e_d即expand div container(容器),c即容器縮寫 b為bool縮寫 n為num縮寫 */ function e_d(obj,n){//這二個參數構成iframe里的子頁面。test1.htm/test2.htm/test3.htm var c = obj.parentNode.nextSibling; /*取父級的下一個節點,跟父級同輩的。*/ var b = ( c.className == 'hide' ); obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*變換+-圖片*/ c.className=b?'text':'hide' if(!c.innerHTML){//如果這一層里沒有內容才更新。有內容則不變化 var str = '<iframe id="iframe' + n + '" src="test' + n + '.htm" scrolling="auto" frameborder="0" width="100%" height="100%"'; str += 'onload="this.style.height=iframe' + n + '.document.body.scrollHeight+30"></iframe>'; c.innerHTML = str; } } </script> </head> <body> <div> <div   id="iwvjtn8m0"   class="hand"> <img src="https://www.jb51.netimages/plus.gif" alt="展開" onclick='e_d(this,1)' />展開1 </div> <div   id="iwvjtn8m0"   class="hide"></div> </div> <div> <div   id="iwvjtn8m0"   class="hand"> <img src="https://www.jb51.netimages/plus.gif" alt="展開" onclick='e_d(this,2)' />展開2 </div> <div   id="iwvjtn8m0"   class="hide"></div> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：Ext面向對象開發實踐代碼第1/2頁

下一篇：jQuery 表格隔行變色代碼[修正注釋版]