编程 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 相关文章推荐

给Function做的OOP扩展

May 07 Javascript

javascript 动态修改样式和层叠样式表代码

Apr 27 Javascript

JavaScript中常见陷阱小结

Apr 27 Javascript

JavaScript内核之基本概念

Oct 21 Javascript

获取客户端网卡MAC地址和IP地址实现JS代码

Mar 17 Javascript

js弹出层永远居中实现思路及代码

Nov 29 Javascript

confirm确认对话框的实现方法总结

Jun 17 Javascript

Node.js中常规的文件操作总结

Oct 13 Javascript

微信小程序 less文件编译成wxss文件实现办法

Dec 05 Javascript

node.js支持多用户web终端实现及安全方案

Nov 29 Javascript

Angular6封装http请求的步骤详解

Aug 13 Javascript

vue生命周期与钩子函数简单示例

Mar 13 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运行SVN命令显示某用户的文件更新记录的代码

2014/01/03 PHP

memcache命令启动参数中文解释

2014/01/13 PHP

利用PHPStorm如何开发Laravel应用详解

2017/08/30 PHP

奇妙的js

2007/09/24 Javascript

FormValidate 表单验证功能代码更新并提供下载

2008/08/23 Javascript

用Javascript实现锚点(Anchor)间平滑跳转

2009/09/08 Javascript

编写Js代码要注意的几条规则

2010/09/10 Javascript

jquery实现网页查找功能示例分享

2014/02/12 Javascript

使用pjax实现无刷新更改页面url

2015/02/05 Javascript

jQuery实现加入购物车飞入动画效果

2015/03/14 Javascript

javascript实现删除前弹出确认框

2015/06/04 Javascript

jQuery实现模仿微博下拉滚动条加载数据效果

2015/12/25 Javascript

JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

2016/07/09 Javascript

JS实现留言板功能

2017/06/17 Javascript

详解vue-cli与webpack结合如何处理静态资源

2017/09/19 Javascript

Vue全局分页组件的实现代码

2018/08/10 Javascript

vue动态绑定class选中当前列表变色的方法示例

2018/12/19 Javascript

详解JavaScript中的函数、对象

2019/04/01 Javascript

echarts实现折线图的拖拽效果

2019/12/19 Javascript

Python天气预报采集器实现代码(网页爬虫)

2012/10/07 Python

Python SQLAlchemy基本操作和常用技巧（包含大量实例,非常好）

2014/05/06 Python

编写Python脚本使得web页面上的代码高亮显示

2015/04/24 Python

Python 模拟员工信息数据库操作的实例

2017/10/23 Python

Python 快速实现CLI 应用程序的脚手架

2017/12/05 Python

pandas计数 value_counts()的使用

2019/06/24 Python

Python_查看sqlite3表结构,查询语句的示例代码

2019/07/17 Python

微信小程序python用户认证的实现

2019/07/29 Python

django使用xadmin的全局配置详解

2019/11/15 Python

在keras中获取某一层上的feature map实例

2020/01/24 Python

python实现磁盘日志清理的示例

2020/11/05 Python

HTML5+CSS3应用详解

2014/02/24 HTML / CSS

Wiggle美国：英国骑行、跑步、游泳、铁人三项商店

2018/10/27 全球购物

CK澳大利亚官网：Calvin Klein澳大利亚

2020/12/12 全球购物

中等生评语大全

2014/05/04 职场文书

SQL Server数据库备份和恢复数据库的全过程

2022/06/14 SQL Server

MySQL外键约束(Foreign Key)案例详解

2022/06/28 MySQL