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动画(animate)简单引擎代码示例
Dec 04 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
微信小程序反编译的实现
Dec 10 Javascript
Node.js实现断点续传
Jun 23 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 at(@)符号的用法简介
2009/07/11 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python发送邮件实例分享
2017/07/28 Python
python实现数据图表
2017/07/29 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python版名片管理系统
2018/11/30 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python zip()函数使用方法解析
2019/10/31 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
青年文明号事迹材料
2014/01/18 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
学校运动会简讯
2015/07/20 职场文书