js利用iframe實現選項卡效果
阿新 • • 發佈:2020-08-10
本文例項為大家分享了js利用iframe實現選項卡的具體程式碼,供大家參考,具體內容如下
<!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 class="bgc" target="iframe1" href="if1.html" rel="external nofollow" >充話費</a><a target="iframe2" href="if2.html" rel="external nofollow" >旅行</a><a target="iframe3" href="if3.html" rel="external nofollow" >車險</a><a target="iframe4" href="if4.html" rel="external nofollow" >遊戲</a> </div> <!--內容--> <div class="cont" id="cont"> <iframe class="show" 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 形成一個為spans的陣列 var iframes=document.getElementById('cont').getElementsByTagName('iframe') //獲取cont下所有的div 形成一個為divs的陣列 //console.log(divs); for (var i = 0; i < as.length; i++) { as[i].index = i;//給陣列spans新增一個index屬性 as[i].onclick=function(){ //i=0、1、2、3 含義:給陣列中所有的span //標籤新增的一個onclick事件 //點選後,span的表現 for (var i = 0; i < as.length; i++)//通過遍歷 當點選時先取消掉span所有的屬性 { as[i].className=''; } //console.log(this); this.className='bgc'; //spans包含了所有的span 因為點選事件 ---點選後(假如點的是第三個) //這時候this就是三 for (var i = 0; i < iframes.length; i++) { iframes[i].className=''; } console.log(this.index);//下標 iframes[this.index].className='show'; } } } </script> </html>
如果大家還想深入學習,可以點選兩個精彩的專題:javascript選項卡操作方法彙總 jquery選項卡操作方法彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。