动感效果的TAB选项卡jquery 插件


Posted in Javascript onJuly 09, 2011

效果图:
动感效果的TAB选项卡jquery 插件
动感效果的TAB选项卡 jquery 插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<link href="tab.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="tab.js"></script> 
<script type="text/javascript"> 
$(function() { 
zeng.tab.init(); 
}); 
</script> 
</head> 
<body> 
<div class="clearfix" id="hot"> 
<div class="main_l tab"> 
<div class="main_title clearfix"> 
<ul class="fx"> 
<li class="on"><a href="#">你是gril</a></li> 
<li class="">我是boy</li> 
</ul> 
</div> 
<div class="t"> 
<div class="main_content clearfix"> 
我在香格里拉 
</div> 
</div> 
<div class="t none"> 
<div class="main_content clearfix"> 
呵呵 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

样式:
@charset "utf-8"; 
/* CSS Document */ 
#hot { 
height: 565px; 
overflow: hidden; 
} 
.clearfix { 
display: block; 
} 
.clearfix::after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
ul { 
list-style: none outside none; 
} 
body { 
line-height: 1.5; 
} 
a, a:link, a:visited { 
color: #333333; 
text-decoration: none; 
} 
a:hover { 
color: #FF6600; 
text-decoration: none; 
} 
.main { 
padding: 0 10px 0 167px; 
position: relative; 
width: 823px; 
} 
.main_l { 
float: left; 
position: relative; 
width: 513px; 
} 
.main_r { 
float: right; 
position: relative; 
width: 300px; 
} 
.main_title { 
background: url("images/s.png") no-repeat scroll 0 0 transparent; 
float: left; 
height: 28px; 
overflow: hidden; 
} 
.main_title ul { 
font-size: 14px; 
} 
.main_title ul li { 
background: none repeat scroll 0 0 #F1F1F1; 
border-left: 1px solid #FFFFFF; 
border-right: 1px solid #FFFFFF; 
border-top: 3px solid #FFFFFF; 
float: left; 
height: 23px; 
line-height: 23px; 
padding-left: 16px; 
padding-right: 16px; 
padding-top: 1px; 
} 
.main_title ul .on { 
background: none repeat scroll 0 0 #FFFFFF; 
border-color: #009AD9 #009AD9 #FFFFFF; 
border-style: solid; 
border-width: 4px 1px 1px; 
height: 22px; 
line-height: 22px; 
padding-left: 16px; 
padding-right: 16px; 
} 
.main_title ul .on a { 
font-weight: 700; 
} 
.main_title span { 
float: right; 
line-height: 24px; 
padding-right: 10px; 
padding-top: 4px; 
} 
.main_l .main_title { 
overflow: hidden; 
width: 513px; 
} 
.main_l .main_content { 
width: 513px; 
} 
.tab div.t.none { 
display: none; 
} 
.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li { 
background-color: transparent; 
} 
.tab .main_title ul.fx li, .tab .main_title ul.fx li.on { 
border-top: 0 none; 
margin-top: -8px; 
padding-top: 0; 
} 
.tab .main_title ul.fx li.on { 
border-bottom-width: 0; 
border-left-color: transparent; 
border-right-color: transparent; 
} 
.tab .main_title ul.fx { 
position: relative; 
z-index: 20; 
} 
.tab .main_title div.animate { 
background-color: #FFFFFF; 
border-color: #009AD9 #009AD9 #FFFFFF; 
border-style: solid; 
border-width: 4px 1px 1px; 
height: 23px; 
position: absolute; 
top: 0; 
}

tab选项卡 源代码:
/* 
* tab 1.0 
* Date: 2011-07-09 15:29 
* http://zengxiangzhan.cnblogs.com/ 
*/ 
var zeng = zeng || {}; 
zeng.tab = { 
t: null, 
delayTime: 150, 
fx: true, 
tab: function(b) { 
$(b).siblings().removeClass("on"); 
$(b).addClass("on"); 
var c = $(b).parents(".tab").find("div.t"); 
var a = c.eq($(b).index()); 
c.addClass("none"); 
a.removeClass("none"); 
if (this.fx) { 
if ($(b).parent().hasClass("nofx")) { 
return 
} 
$(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({ 
left: $(b).position().left 
}, "slow") 
} 
}, 
delayTab: function(b, a) { 
clearTimeout(b.t); 
this.t = setTimeout(function() { 
b.tab(a) 
}, this.delayTime) 
}, 
init: function() { 
var a = this; 
a.animate(); 
if (window.Touch) { 
$(".tab .main_title>ul>li[class!='on']>a").click(function() { 
return false 
}) 
} 
$(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() { 
a.delayTab(a, this) 
}, function() { 
clearTimeout(a.t) 
}) 
}, 
animate: function() { 
if (!this.fx) { 
return 
} 
$(".tab .main_title>ul").each(function() { 
if (!$(this).hasClass("nofx")) { 
$(this).addClass("fx") 
} 
}); 
$(".tab .main_title").each(function(a, b) { 
if ($(this).find("ul").hasClass("nofx")) { 
return 
} 
$(b).append("<div class='animate' ></div>"); 
$(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left) 
}) 
} 
};

作者:曾祥展
Javascript 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 #Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
You might like
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php中大括号作用介绍
2012/03/22 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
angular4自定义组件详解
2017/09/28 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python中特殊函数集锦
2015/07/27 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python实现推箱子游戏
2020/03/25 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python中K-means算法基础知识点
2021/01/25 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
老人节标语大全
2014/10/08 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
公积金接收函格式
2015/01/30 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
高中政治教师教学反思
2016/02/23 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android