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

一个简单的javascript类定义例子

Sep 12 Javascript

单击按钮显示隐藏子菜单经典案例

Jan 04 Javascript

jquery $.each 和for怎么跳出循环终止本次循环

Sep 27 Javascript

20条学习javascript的编程规范的建议

Nov 28 Javascript

jQuery定义背景动态切换效果的方法

Mar 23 Javascript

谈谈encodeURI和encodeURIComponent以及escape的区别与应用

Nov 24 Javascript

JQuery之proxy实现绑定代理方法

Aug 01 Javascript

canvas实现绘制吃豆鱼效果

Jan 12 Javascript

微信小程序封装http访问网络库实例代码

May 24 Javascript

微信小程序实现自上而下字幕滚动

Jul 14 Javascript

解决Vue @submit 提交后不刷新页面问题

Jul 18 Javascript

详解Js模块化的作用原理和方案

Apr 29 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中批量修改文件后缀名的函数代码

2011/10/23 PHP

配置php.ini实现PHP文件上传功能

2014/11/27 PHP

Centos下升级php5.2到php5.4全记录（编译安装）

2015/04/03 PHP

PHP时间戳格式全部汇总 (获取时间、时间戳)

2016/06/13 PHP

php分页原理分页代码分页类制作教程

2016/09/23 PHP

php 单例模式详细介绍及实现源码

2016/11/05 PHP

Laravel 修改默认日志文件名称和位置的例子

2019/10/17 PHP

Javascript Object.extend

2010/05/18 Javascript

Js获取事件对象代码

2010/08/05 Javascript

[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客

2014/08/18 Javascript

CSS图片响应式垂直水平居中

2015/08/14 Javascript

JavaScript寄生组合式继承实例详解

2018/01/06 Javascript

Vue header组件开发详解

2018/01/26 Javascript

vue组件（全局，局部，动态加载组件）

2018/09/02 Javascript

基于vue2的canvas时钟倒计时组件步骤解析

2018/11/05 Javascript

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

2018/11/12 Javascript

node.js中express模块创建服务器和http模块客户端发请求

2019/03/06 Javascript

JavaScript实现的3D旋转魔方动画效果实例代码

2019/07/31 Javascript

Vue中el-form标签中的自定义el-select下拉框标签功能

2020/04/20 Javascript

在react项目中使用antd的form组件,动态设置input框的值

2020/10/24 Javascript

解决python3爬虫无法显示中文的问题

2018/04/12 Python

python使用epoll实现服务端的方法

2018/10/16 Python

python基础知识（一）变量与简单数据类型详解

2019/04/17 Python

django自定义模板标签过程解析

2019/12/14 Python

python 判断txt每行内容中是否包含子串并重新写入保存的实例

2020/03/12 Python

解决TensorFlow调用Keras库函数存在的问题

2020/07/06 Python

python 通过 pybind11 使用Eigen加速代码的步骤

2020/12/07 Python

详解css3 Transition属性（平滑过渡菜单栏案例）

2017/09/05 HTML / CSS

AmazeUI图片轮播效果的示例代码

2020/08/20 HTML / CSS

德国知名健康零食网上商店：Seeberger

2017/07/27 全球购物

新西兰廉价汽车租赁：Snap Rentals

2018/09/14 全球购物

日本亚马逊官方网站：Amazon.co.jp

2020/04/14 全球购物

KTV的创业计划书范文

2014/02/02 职场文书

戒毒悔改检讨书

2014/09/21 职场文书

公司仓库管理制度

2015/08/04 职场文书

源码分析Redis中 set 和 sorted set 的使用方法

2022/03/22 Redis