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' >車(chē)險(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è)精彩的專(zhuān)題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JavaMail 1.4 發(fā)布2. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析3. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼4. vue使用webSocket更新實(shí)時(shí)天氣的方法5. 解決啟動(dòng)django,瀏覽器顯示“服務(wù)器拒絕訪問(wèn)”的問(wèn)題6. Yii2.0引入CSS,JS文件方法7. Nginx+php配置文件及原理解析8. 淺談python出錯(cuò)時(shí)traceback的解讀9. 如何使用CSS3畫(huà)出一個(gè)叮當(dāng)貓10. 關(guān)于HTML5的img標(biāo)簽
網(wǎng)公網(wǎng)安備