基于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 不间断的图片滚动并可点击
Jan 15 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
tab栏切换原理
Mar 22 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
php 生成唯一id的几种解决方法
2013/03/08 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
cakephp常见知识点汇总
2017/02/24 PHP
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
英文感谢信范文
2015/01/21 职场文书
介绍信怎么写
2015/05/05 职场文书
专项资金申请报告
2015/05/15 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
商场广播稿范文
2015/08/19 职场文书
工作建议书范文
2019/07/08 职场文书
创业计划书之面包店
2019/09/17 职场文书