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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JavaScript中return false的用法
Mar 12 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue项目环境变量配置的实现方法
Oct 12 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 文件编程综合案例-文件上传的实现
2013/07/03 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
手机端转换rem适应
2017/04/01 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
团日活动总结
2014/04/28 职场文书
借款担保书范文
2014/05/13 职场文书
新闻报道策划方案
2014/06/11 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
期末考试复习计划
2015/01/19 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
新学期开学标语2015
2015/07/16 职场文书
聘用合同范本
2015/09/21 职场文书