基于JavaScript实现TAB标签效果


Posted in Javascript onJanuary 12, 2016

 js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下

废话不多说了,直接给大家贴代码了:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为不规则TAB选项卡效果,属于站长常用代码,更多TAB标签代码请访问三水点靠木频道。" />
<title>TAB选项卡效果</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
//定义三个id
#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/01.jpg);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/02.jpg);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/03.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" onMouseDown="setTab03Syn(1);document.getElementById('bg').className='xixi1'">page1</div>
<div id="font2" class="tab2" onMouseDown="setTab03Syn(2);document.getElementById('bg').className='xixi2'">page2</div>
<div id="font3" class="tab3" onMouseDown="setTab03Syn(3);document.getElementById('bg').className='xixi3'">page3</div>
</div>
<div id=TabTab03Con1> 不规则TAB选项卡效果1</div>
<div id=TabTab03Con2 style="display:none">不规则TAB选项卡效果2</div>
<div id=TabTab03Con3 style="display:none">不规则TAB选项卡效果3</div>
</div>
</body>
</html>

以上代码经小编测试过了,可以放心使用,当然要根据个人项目需求,适当的增删改查,非常感谢大家对三水点靠木网站的支持。

Javascript 相关文章推荐
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
如何快速上手Vuex
Feb 14 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
JavaScript实现瀑布流布局
Jun 28 #Javascript
轻松实现JavaScript图片切换
Jan 12 #Javascript
jQuery动画效果图片轮播特效
Jan 12 #Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 #Javascript
jqueryMobile使用示例分享
Jan 12 #Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 #Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
js实现抽奖功能
2020/11/24 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python线程池threadpool实现篇
2018/04/27 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python实现弹窗祝福效果
2019/04/07 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python定义一个Actor任务
2020/07/29 Python
python 发送get请求接口详解
2020/11/17 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
大学生自荐书范文
2013/12/10 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
硕士生工作推荐信
2014/03/07 职场文书
教师工作失职检讨书
2014/09/18 职场文书
订货会主持词
2015/07/01 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书