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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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魔术方法的使用示例
2015/06/23 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Prototype Date对象 学习
2009/07/12 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
详解Python中的type()方法的使用
2015/05/21 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
写自荐信三大法宝
2014/01/24 职场文书
八年级数学教学反思
2014/01/31 职场文书
个人年终总结范文
2015/03/09 职场文书