JavaScript实现的原生态Tab标签页功能【兼容IE6】


Posted in Javascript onSeptember 18, 2017

本文实例讲述了JavaScript实现的原生态Tab标签页功能。分享给大家供大家参考,具体如下:

标签页是一个很常见的东西,在一些框架中也就很常见的,

但未必所有人都知道怎么写,很多人知道怎么在网上复制一份是真的,

这样不好,往往需要用大量的时间去修改网上复制下来的东西,还不如自己写一份快。

一、基本目标

创建一个如下的标签页,在IE8中与谷歌浏览器中的效果如下,几乎没有区别

谷歌浏览器:

JavaScript实现的原生态Tab标签页功能【兼容IE6】

IE8:

JavaScript实现的原生态Tab标签页功能【兼容IE6】

二、制作过程

1、首先布置好场景,在一个图层内:

图层1~图层4四个超级链接是一个图层,然后各自的图层的内容分别是各自的图层,默认是图层1的内容显示,而图层2~4则默认不显示

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<div style="border:1px solid #000000;float:left;wight:10%;">
<div>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层1</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层2</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层3</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">图层4</a>
</div>
<div id="tabdiv1" style="display:block;">aaaaaaaaaaaaaaaaaaa</div>
<div id="tabdiv2" style="display:none;">bbbbbbbbbbbbbbbbb</div>
<div id="tabdiv3" style="display:none;">cccccccccccccccc</div>
<div id="tabdiv4" style="display:none;">dddddddddddddd</div>
</div>
<div style="clear:both"></div>
</body>
</html>

2、然后是每一个超级链接都传递自身到Javascript脚本处理,注意的是,如果对超级链接添加Javascript脚本,必须在写上href,并且这个链接指向javascript:void(0),随后,再加上onclick属性。之后,得到整个超级链接的Javascript根据超级链接的文本进行判断,如果是图层1,则显示图层1,隐藏其它的所有图层,以此类推。注意的是,a是没有value属性的,所以这里根据其内文本进行判断。

<script>
function div_tab(obj){
  switch(obj.innerHTML){
    case "图层1":
      document.getElementById("tabdiv1").style.display="block";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "图层2":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="block";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "图层3":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="block";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "图层4":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="block";
      break;
  }
}
</script>

更多关于JavaScript相关内容可查看本站专题:《JavaScript页面元素操作技巧总结》、《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
深入分析javascript中console命令
Aug 14 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
layui文件上传实现代码
May 20 Javascript
详解vue axios二次封装
Jul 22 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 #Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 #Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 #Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
详解node服务器中打开html文件的两种方法
Sep 18 #Javascript
详解利用 Express 托管静态文件的方法
Sep 18 #Javascript
Express使用html模板的详细代码
Sep 18 #Javascript
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
实现无刷新联动例子汇总
2015/05/20 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
二年级语文教学反思
2014/02/02 职场文书
消防安全员岗位职责
2014/03/10 职场文书
法人授权委托书
2014/04/03 职场文书
给老婆的保证书范文
2014/04/28 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
大学生见习总结报告
2015/06/24 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python