js利用iframe实现选项卡效果
导读：本文实例为大家分享了js利用iframe实现选项卡的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title></title> &...
本文实例为大家分享了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 target='iframe1' href='https://www.haobala.com/bcjs/if1.html' >充话费</a><a target='iframe2' href='https://www.haobala.com/bcjs/if2.html' >旅行</a><a target='iframe3' href='https://www.haobala.com/bcjs/if3.html' >车险</a><a target='iframe4' href='https://www.haobala.com/bcjs/if4.html' >游戏</a> </div> <!--内容--> <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 形成一个为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选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. CSS3实例分享之多重背景的实现(Multiple backgrounds)2. intellij idea中spring boot properties文件不能自动提示问题解决3. Android自定义Dialog框样式4. 使用Canal实现PHP应用程序与MySQL数据库的实时数据同步5. 一篇文章带你了解JavaScript-语句6. 详解IDEA搭建springBoot方式一(推荐)7. asp.net core服务限制堆内存大小的操作方法8. intellij idea写Python教程9. Android Studio导入jar包过程详解10. IntelliJ IDEAx导出安卓（Android）apk文件图文教程
网公网安备