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程序设计有所帮助。

Javascript 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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 正则表达式小结
2009/08/31 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
web前端开发也需要日志
2010/12/09 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
vue中activated的用法
2021/01/03 Vue.js
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python 不以科学计数法输出的方法
2018/07/16 Python
java判断三位数的实例讲解
2019/06/10 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
servlet面试题
2012/08/20 面试题
利群广告词
2014/03/20 职场文书
服务理念口号
2014/06/11 职场文书
物理学专业自荐信
2014/06/11 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
公司演讲稿开场白
2014/08/25 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Go语言编译原理之源码调试
2022/08/05 Golang