基于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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP脚本的10个技巧(4)
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python实现的发邮件功能示例
2019/09/11 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
应用化学专业本科生求职信
2013/09/29 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
品牌宣传方案
2014/03/21 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
消防安全主题班会
2015/08/12 职场文书