当前位置: 首頁 > javascript > jQuery写的一款常见TAB选项卡效果插件

jQuery写的一款常见TAB选项卡效果插件

我用JQ写了一个插件,以下是源码和示例

示例效果

鼠标经过切换

tab1
tab2
tab3
这是选项卡1的内容
这是选项卡2的内容,这是选项卡2的内容
这是选项卡3的内容,这是选项卡3的内容,这是选项卡3的内容

鼠标点击切换

选项卡一
选项卡二
选项卡三
这是选项卡1的内容
这是选项卡2的内容
这是选项卡3的内容

JQ插件代码

$.fn.tab=function(option){
	//初始声明
	var obj=$(this);
	obj.e='mouseenter';
	obj.btn=$(obj).find('.tab_title');
	obj.box=$(obj).find('.tab_box');
	obj.btn_width=($(obj).width())/obj.btn.length;
	obj=$.extend(obj,option);
	//初始化
	$(obj.btn).eq(0).addClass('hover');
	$(obj.box).eq(0).show();
	$(obj.btn).width(obj.btn_width);
	//事件
	$(obj.btn).bind(obj.e,function(){
		var str=$(this).attr('name');
		str='.'+str+'_box';
		$(obj.btn).removeClass('hover');
		$(this).addClass('hover');
		$(obj.box).hide();
		$(obj).find(str).show();
		});
	};

插件调用代码

$(document).ready(function(){
	$('.jq_tab').tab();	
	$('.jq_tab1').tab({e:'click'});	
	})

插件CSS样式

.jq_tab{ width:500px; border:1px solid #ededed; display:none;}
.jq_tab1{ width:300px; border:1px solid #ededed;}
.tab_head{ background:#eee; height:30px; line-height:30px;}
.tab_title{ text-align:center; float:left; color:#000; cursor:pointer}
.tab_title.hover{ background:#fff; color:#000;}
.tab_body{ height:150px; font-size:14px; padding:10px;}
.tab_box{ height:100%; width:100%; display:none;}

html代码

tab1
tab2
tab3
这是选项卡1的内容
这是选项卡2的内容,这是选项卡2的内容
这是选项卡3的内容,这是选项卡3的内容,这是选项卡3的内容
选项卡一
选项卡二
选项卡三
这是选项卡1的内容
这是选项卡2的内容
这是选项卡3的内容
评论 ( 0 )

网友留言