js利用iframe实现选项卡效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了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" >充话费</a><a target="iframe2" href="if2.html" >旅行</a><a target="iframe3" href="if3.html" >车险</a><a target="iframe4" href="if4.html" >游戏</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选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 对象介绍
Jan 20 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
layui选项卡效果实现代码
May 19 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
游戏商店:Eneba
2020/04/25 全球购物
天网面试题
2013/04/07 面试题
电子商务专员岗位职责
2013/12/11 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
节约能源标语
2014/06/17 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年依法行政工作总结
2014/11/19 职场文书