编程 Javascript

JS实现的不规则TAB选项卡效果代码

Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS实现的不规则TAB选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款采用菱形的选项卡效果，一改选项卡中规中矩的风格，效果非常不错，奉献给大家。

运行效果截图如下：

JS实现的不规则TAB选项卡效果代码

在线演示地址如下：

具体代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB选项卡效果</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.xixi1{width:346px;height:27px;line-height:27px;background-image:url(images/tab01.jpg);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/tab02.jpg);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/tab03.jpg);cursor:pointer;}
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
-->
</style>
</head>
<body style="text-align:center">
<script type=text/javascript>
 function setTab03Syn ( i )
 {
  selectTab03Syn(i);
 }
 function selectTab03Syn ( i )
 {
  switch(i){
   case 1:
   document.getElementById("TabTab03Con1").style.display="block";
   document.getElementById("TabTab03Con2").style.display="none";
   document.getElementById("TabTab03Con3").style.display="none";
   document.getElementById("font1").style.color="#000000";
   document.getElementById("font2").style.color="#ffffff";
   document.getElementById("font3").style.color="#ffffff";
   break;
   case 2:
   document.getElementById("TabTab03Con1").style.display="none";
   document.getElementById("TabTab03Con2").style.display="block";
   document.getElementById("TabTab03Con3").style.display="none";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#000000";
   document.getElementById("font3").style.color="#ffffff";
   break;
   case 3:
   document.getElementById("TabTab03Con1").style.display="none";
   document.getElementById("TabTab03Con2").style.display="none";
   document.getElementById("TabTab03Con3").style.display="block";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#ffffff";
   document.getElementById("font3").style.color="#000000";
   break;
  }
 }
</script>
<div class="tab">
 <div id="bg" class="xixi1">
  <div id="font1" class="tab1" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">查询广告企业</div>
  <div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">查询媒体刊例</div>
  <div id="font3" class="tab3" onMouseOver="setTab03Syn(3);document.getElementById('bg').className='xixi3'">查询供求商情</div>
 </div>
 <div id=TabTab03Con1>不规则TAB选项卡效果</div>
 <div id=TabTab03Con2 style="display:none">内容2</div>
 <div id=TabTab03Con3 style="display:none">内容3</div>
</div>
</body>
</html>

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

JS实现的不规则TAB选项卡效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

kmock javascript 单元测试代码

Feb 06 Javascript

IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

Aug 28 Javascript

HTML页面滚动时获取离页面顶部的距离2种实现方法

Sep 05 Javascript

setInterval计时器不准的问题解决方法

May 08 Javascript

仅9张思维导图帮你轻松学习Javascript 就这么简单

Jun 01 Javascript

在Web项目中引入Jquery插件报错的完美解决方案(图解)

Sep 19 Javascript

微信小程序实战之仿android fragment可滑动底部导航栏（4）

Apr 16 Javascript

ES6入门教程之Iterator与for...of循环详解

May 17 Javascript

详解Angular 中 ngOnInit 和 constructor 使用场景

Jun 22 Javascript

微信小程序滑动选择器的实现代码

Aug 10 Javascript

angular4 获取wifi列表中文显示乱码问题的解决

Oct 20 Javascript

JavaScript如何利用Promise控制并发请求个数

May 14 Javascript

JS实现兼容性好,带缓冲的动感网页右键菜单效果

Sep 18 #Javascript

JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

Sep 18 #Javascript

jQuery采用连缀写法实现的折叠菜单效果

Sep 18 #Javascript

JS+CSS实现TreeMenu二级树形菜单完整实例

Sep 18 #Javascript

JS实现黑色大气的二级导航菜单效果

Sep 18 #Javascript

11种ASP连接数据库的方法

Sep 18 #Javascript

jquery实现隐藏在左侧的弹性弹出菜单效果

Sep 18 #Javascript

You might like

第二章 PHP入门基础之php代码写法

2011/12/30 PHP

php页面缓存ob系列函数介绍

2012/10/18 PHP

PHP两种去掉数组重复值的方法比较

2014/06/19 PHP

php转换颜色为其反色的方法

2015/04/27 PHP

yii2的restful api路由实例详解

2019/05/14 PHP

js身份证验证超强脚本

2008/10/26 Javascript

JavaScript URL参数读取改进版

2009/01/16 Javascript

jQuery插件 selectToSelect使用方法

2013/10/02 Javascript

JavaScript调试技巧之console.log()详解

2014/03/19 Javascript

jQuery页面元素动态添加后绑定事件丢失方法,非 live

2016/06/16 Javascript

js捕捉键盘事件和按键键值的方法

2016/10/10 Javascript

从零学习node.js之express入门(六)

2017/02/25 Javascript

JS字符串false转boolean的方法(推荐)

2017/03/08 Javascript

Vue编写多地区选择组件

2017/08/21 Javascript

手机注册发送验证码倒计时的简单实例

2017/11/15 Javascript

layui 解决form表单点击无反应的问题

2019/10/25 Javascript

在Angular中实现一个级联效果的下拉框的示例代码

2020/05/20 Javascript

深入理解 ES6中的 Reflect用法

2020/07/18 Javascript

[02:06]2018完美世界全国高校联赛秋季赛开始报名（附彩蛋）

2018/09/03 DOTA

Python 3.6 性能测试框架Locust安装及使用方法(详解)

2017/10/11 Python

python实现自动发送报警监控邮件

2018/06/21 Python

用python代码将tiff图片存储到jpg的方法

2018/12/04 Python

对python遍历文件夹中的所有jpg文件的实例详解

2018/12/08 Python

Python数据类型之List列表实例详解

2019/05/08 Python

Python获取统计自己的qq群成员信息的方法

2019/11/15 Python

Python动态导入模块：__import__、importlib、动态导入的使用场景实例分析

2020/03/30 Python

基于logstash实现日志文件同步elasticsearch

2020/08/06 Python

如何将json数据转换为python数据

2020/09/04 Python

selenium学习教程之定位以及切换frame（iframe）

2021/01/04 Python

CSS3 实现的缩略图悬停效果

2020/12/09 HTML / CSS

I.T中国官网：精选时尚设计师单品网购平台

2018/03/26 全球购物

HQhair美国/加拿大：英国化妆品、美容及美发产品商城

2019/04/15 全球购物

个人自我鉴定写法

2013/11/30 职场文书

领导干部对照检查材料

2014/08/24 职场文书

园艺专业毕业生求职信

2014/09/02 职场文书

加入学生会自荐书

2015/03/05 职场文书