js利用iframe實(shí)現(xiàn)選項(xiàng)卡效果
本文實(shí)例為大家分享了js利用iframe實(shí)現(xiàn)選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title></title> <style> .header{ width: 400px; height: 40px; border:solid 1px red; } .header a{ width: 100px; height: 40px; text-align:center; line-height:40px; display: inline-block; } .bgc{ background-color: cyan; } .cont{ width: 400px; height: 400px; border:dashed 1px saddlebrown; } .cont iframe{ /*width: 400px; height: 400px;*/ display: none; } #cont .show{ display: block; } </style> </head> <body> <!--最外部--> <div class='content'> <!--頭部--> <div class='header'> <a target='iframe1' href='http://www.aoyou183.cn/bcjs/if1.html' >充話費(fèi)</a><a target='iframe2' href='http://www.aoyou183.cn/bcjs/if2.html' >旅行</a><a target='iframe3' href='http://www.aoyou183.cn/bcjs/if3.html' >車險(xiǎn)</a><a target='iframe4' href='http://www.aoyou183.cn/bcjs/if4.html' >游戲</a> </div> <!--內(nèi)容--> <div id='cont'> <iframe name='iframe1' ></iframe> <iframe name='iframe2' ></iframe> <iframe name='iframe3'></iframe> <iframe name='iframe4' ></iframe> </div> </div> </body> <script type='text/javascript'> window.onload=function(){ var as=document.getElementsByTagName(’a’); //獲取所有的span 形成一個(gè)為spans的數(shù)組 var iframes=document.getElementById(’cont’).getElementsByTagName(’iframe’) //獲取cont下所有的div 形成一個(gè)為divs的數(shù)組 //console.log(divs); for (var i = 0; i < as.length; i++) { as[i].index = i;//給數(shù)組spans添加一個(gè)index屬性 as[i].onclick=function(){ //i=0、1、2、3 含義：給數(shù)組中所有的span //標(biāo)簽添加的一個(gè)onclick事件 //點(diǎn)擊后，span的表現(xiàn) for (var i = 0; i < as.length; i++)//通過(guò)遍歷 當(dāng)點(diǎn)擊時(shí)先取消掉span所有的屬性 { as[i].className=’’; } //console.log(this); this.className=’bgc’; //spans包含了所有的span 因?yàn)辄c(diǎn)擊事件 ---點(diǎn)擊后（假如點(diǎn)的是第三個(gè)） //這時(shí)候this就是三 for (var i = 0; i < iframes.length; i++) { iframes[i].className=’’; } console.log(this.index);//下標(biāo) iframes[this.index].className=’show’; } } } </script></html>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算2. 詳解idea中web.xml默認(rèn)版本問(wèn)題解決3. JSP頁(yè)面實(shí)現(xiàn)驗(yàn)證碼校驗(yàn)功能4. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法5. jsp EL表達(dá)式詳解6. asp知識(shí)整理筆記4（問(wèn)答模式）7. ASP實(shí)現(xiàn)加法驗(yàn)證碼8. python selenium 獲取接口數(shù)據(jù)的實(shí)現(xiàn)9. java 優(yōu)雅關(guān)閉線程池的方案10. Python matplotlib 繪制雙Y軸曲線圖的示例代碼
網(wǎng)公網(wǎng)安備