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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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实现文件下载代码分享
2014/08/19 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP常用的三种设计模式
2017/02/17 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python实现简单遗传算法
2018/03/19 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
写好自荐信的技巧
2013/11/08 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
优秀党支部申报材料
2014/12/24 职场文书
三八妇女节致辞
2015/07/31 职场文书
《静夜思》教学反思
2016/02/17 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python