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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
javascript基本算法汇总
Mar 09 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
解决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函数
2011/05/31 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php中异常处理方法小结
2015/01/09 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python的移位操作实现详解
2019/08/21 Python
如何在django中添加日志功能
2020/02/06 Python
python两个list[]相加的实现方法
2020/09/23 Python
python中二分查找法的实现方法
2020/12/06 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
应届生财务管理求职信
2013/11/06 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2015年采购部工作总结
2015/04/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
HTML中的表格元素介绍
2022/02/28 HTML / CSS