jQuery TAB插件点击切换js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery TAB插件点击切换js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>jQuery TAB���</title>
<style>
* {
	margin:0;
	padding:0;
}
body {
	background:#e3e3e3;
	height:100%;
	font:normal normal 12px/24px "Microsoft yahei", Arial;
	padding-bottom:30px;
}
#title{width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
h6 a { color:#09c; }
#wrapper {
	width:300px;
	margin:0 auto;
	background:#f8f8f8;
	border:1px solid #a3a3a3;
	padding:20px 20px 50px;
	border-radius:5px;-moz-border-radius:5px;
}
.box{width:210px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{list-style:none;width:210px;overflow:hidden;}
.tab_menu li{width:70px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_box{padding:20px;height:120px;}
.tab_box .hide{display:none;}
h3{color:#333;font-size:14px;width:210px;margin:30px auto 0;}
</style>
</head>

<body>
<div id="title">
<h1>jQuery TAB�����ʾ</h1>
</div>
<div id="wrapper">
<h3>Ĭ��״̬</h3>
<div class="box demo1">
	<ul class="tab_menu">
		<li class="current">����</li>
		<li>ͼƬ</li>
		<li>����</li>
	</ul>
	<div class="tab_box">
		<div>����</div>
		<div class="hide">ͼƬ</div>
		<div class="hide">����</div>
	</div>
</div>
<h3>�����</h3>
<div class="box demo2">
	<ul class="tab_menu">
		<li class="current">����</li>
		<li>ͼƬ</li>
		<li>����</li>
	</ul>
	<div class="tab_box">
		<div>����</div>
		<div class="hide">ͼƬ</div>
		<div class="hide">����</div>
	</div>
</div>
<h3>�¼��ӳ� 300����</h3>
<div class="box demo3">
	<ul class="tab_menu">
		<li class="current">����</li>
		<li>ͼƬ</li>
		<li>����</li>
	</ul>
	<div class="tab_box">
		<div>����</div>
		<div class="hide">ͼƬ</div>
		<div class="hide">����</div>
	</div>
</div>
<h3>�Զ��ֻ� 3����</h3>
<div class="box demo4">
	<ul class="tab_menu">
		<li class="current">����</li>
		<li>ͼƬ</li>
		<li>����</li>
	</ul>
	<div class="tab_box">
		<div>����</div>
		<div class="hide">ͼƬ</div>
		<div class="hide">����</div>
	</div>
</div>
<h3>�ص�����</h3>
<div class="box demo5">
	<ul class="tab_menu">
		<li class="current">����</li>
		<li>ͼƬ</li>
		<li>����</li>
	</ul>
	<div class="tab_box">
		<div>����</div>
		<div class="hide">ͼƬ</div>
		<div class="hide">����</div>
	</div>
</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.tabs.js"></script>
<script>
$(function(){
	$('.demo1').Tabs();
	$('.demo2').Tabs({
		event:'click',
		switchBtn : true
	});
	$('.demo3').Tabs({
		timeout:300
	});
	$('.demo4').Tabs({
		auto:3000
	});
	$('.demo5').Tabs({
		event:'click',
		callback:tabcallback
	});
	function tabcallback(){
		alert( '���ǻص�����' );
	}
});	
</script>
</body>
</html>

JS代码(jquery.tabs.js):

/* =================================================// jQuery Tabs Plugins 1.3// author:chenmnkken@gmail.com// Url:http://stylechen.com/jquery-tabs.html// Data:2012-09-06// =================================================*/
;
	(function($){
	$.fn.Tabs = function(options){
	return this.each(function(){
	// 处理参数options = $.extend({
	event:'mouseover',timeout:0,auto:0,callback:null,switchBtn:false}
,options);
	var self = $(this),tabBox = self.children( 'div.tab_box' ).children( 'div' ),menu = self.children( 'ul.tab_menu' ),items = menu.find( 'li' ),timer;
	var tabHandle = function( elem ){
	elem.siblings( 'li' ).removeClass( 'current' ).end().addClass( 'current' );
	tabBox.siblings( 'div' ).addClass( 'hide' ).end().eq( elem.index() ).removeClass( 'hide' );
}
,delay = function( elem,time ){
	time ? setTimeout(function(){
	tabHandle( elem );
}
,time):tabHandle( elem );
}
,start = function(){
	if( !options.auto ) return;
	timer = setInterval( autoRun,options.auto );
}
,autoRun = function( isPrev ){
	var current = menu.find( 'li.current' ),firstItem = items.eq(0),lastItem = items.eq(items.length - 1),len = items.length,index = current.index(),item,i;
	if( isPrev ){
	index -= 1;
	item = index === -1 ? lastItem:current.prev( 'li' );
}
else{
	index += 1;
	item = index === len ? firstItem:current.next( 'li' );
}
i = index === len ? 0:index;
	current.removeClass( 'current' );
	item.addClass( 'current' );
	tabBox.siblings( 'div' ).addClass( 'hide' ).end().eq(i).removeClass( 'hide' );
	if( options.callback ){
	options.callback.call( self );
}
}
;
	items.bind( options.event,function(){
	delay( $(this),options.timeout );
	if( options.callback ){
	options.callback.call( self );
}
}
);
	if( options.auto ){
	start();
	self.hover(function(){
	clearInterval( timer );
	timer = undefined;
}
,function(){
	start();
}
);
}
if( options.switchBtn ){
	self.append( '<a href="#prev" class="tab_prev">previous</a><a href="#next" class="tab_next">next</a>' );
	var prevBtn = $( '.tab_prev',self ),nextBtn = $( '.tab_next',self );
	prevBtn.click(function( e ){
	autoRun( true );
	e.preventDefault();
}
);
	nextBtn.click(function( e ){
	autoRun();
	e.preventDefault();
}
);
}
}
);
}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)