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

更新時間：2008年11月18日 00:26:17 作者：

簡直的展開或關(guān)閉

<!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>簡直的展開或關(guān)閉</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"> /*根據(jù)點(diǎn)擊項，動態(tài)加載內(nèi)容至iframe中 expand(展開),e_d即expand div container(容器),c即容器縮寫 b為bool縮寫 n為num縮寫 */ function e_d(obj,n){//這二個參數(shù)構(gòu)成iframe里的子頁面。test1.htm/test2.htm/test3.htm var c = obj.parentNode.nextSibling; /*取父級的下一個節(jié)點(diǎn),跟父級同輩的。*/ var b = ( c.className == 'hide' ); obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*變換+-圖片*/ c.className=b?'text':'hide' if(!c.innerHTML){//如果這一層里沒有內(nèi)容才更新。有內(nèi)容則不變化 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="d7ns2vz"   class="hand"> <img src="images/plus.gif" alt="展開" onclick='e_d(this,1)' />展開1 </div> <div   id="y2ycosb"   class="hide"></div> </div> <div> <div   id="p827fwo"   class="hand"> <img src="images/plus.gif" alt="展開" onclick='e_d(this,2)' />展開2 </div> <div   id="zxzgn72"   class="hide"></div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JavaScript(JS) 壓縮 / 混淆 / 格式化批處理工具
本工具所有的功能實現(xiàn)都是由 ttp://jscompress.sinaapp.com/api 處理.（包括現(xiàn)在可以使用的這個在線壓縮）
2010-12-12
js匿名函數(shù)作為函數(shù)參數(shù)詳解
下面小編就為大家?guī)硪黄猨s匿名函數(shù)作為函數(shù)參數(shù)詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
淺談javascript的閉包
本文介紹了javascript閉包的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-01-01
uniapp獲取手機(jī)通知權(quán)限實現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機(jī)通知權(quán)限實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
js 動態(tài)選中下拉框
js 動態(tài)選中下拉框
2009-11-11
echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb（2）
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個強(qiáng)大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下
2015-12-12
純javascript實現(xiàn)自動發(fā)送郵件
當(dāng)我們發(fā)送郵件時，可以自定義郵件發(fā)送的時間，那么使用代碼是如何實現(xiàn)的呢？下面通過本篇文章給大家介紹使用純javascript實現(xiàn)自動發(fā)送郵件，感興趣的朋友可以參考下
2015-10-10
淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
在JavaScript中使用mqtt.js的詳細(xì)過程
這篇文章主要介紹了在JavaScript中使用mqtt.js的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04