SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
;(function($){
	var Tab=function(tab){
		var _this_=this;
		//保存单个tab组件
		this.tab= tab;
		this.config={
			"triggerType":"mouseover",
				"effect":"default",
				"invoke":1,  //默认显示哪个tab
				"auto":false
		};
		if(this.getConfig()){
			$.extend(this.config,this.getConfig);
		};
		this.tabItems=this.tab.find("ul.tab-nav li");
		this.contentItems=this.tab.find("div.content-wrap div.content-item");
		
		var config=this.config;
		if(config.triggerType==="click"){
			this.tabItems.bind("config.triggerType",function(){
				_this_.invoke($this);
			});
		}else if(config.triggerType==="mouseover"||config.triggerType!="click"){
			this.tabItems.mouseover(unction(){
				_this_.invoke($this);
			});
		};
	};
	Tab.prototype={
 		invoke:function(currentTab){
		var _this_=this;
		//tab选中状态
	var index=currentTab.index();	currentTab.addClass('actived').siblings().removeClasss("actived");
		//内容区域切换
		var effect=this.config.effect;
	var conItems=this.contentItems;
		if(effect==="default"){
			conItems.eq(index).addClass("current").siblings().removeClass("current");
		}else if(effect==="fade"){
			conItems.eq(index).fadeIn().siblings().fadeOut();
		};
	},
		//获取配置参数
		getConfig:function(){
			var config=this.tab.attr("data-config");
			if(config&&config!="")
				return $.parseJSON(config);
			else
				return null;
		}
	};
	window.Tab=Tab;
})(jQuery);

            
<body>
	<div class="js-tab tab" data-config='{triggerType":"click",
				"effect":"fade",
				"invoke":2,
				"auto":5000}'>
		<ul class="tab-nav">
			<li class="actived"><a href="javascript:void(0);">新闻</a></li>
			<li><a href="#">娱乐</a></li>
			<li><a href="#">书籍</a></li>
			<li><a href="#">科技</a></li>
		</ul>
	<div class="content-wrap">
		<div class="content-item current"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgf4anfxogj311y0lcgrh.jpg" /></div>
		<div class="content-item"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgf4affoz7j311y0lcq92.jpg" /></div>
		<div class="content-item"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgf4abnsajj311y0lc42g.jpg" /></div>
		<div class="content-item"><img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fg2av4sn63j311y0lc76v.jpg" /></div>
		</div>
	</div>
	<script>
		$(function(){
			var tab1=new Tab($('.js-tab').eq(0));
			
		});
	</script>
</body>

            
*{margin:0;padding:0;}
.tab{
	width:300px;
}
.tab .content-wrap .content-item img{
	width:300px;
	height:200px;
	overflow:hidden;
}
.tab .tab-nav{
	height:30px;
}
.tab .tab-nav li{
	float:left;
	margin-left:5px;
	background-color:#767676;
	border-radius:3px 3px 0 0;
}
.tab .tab-nav li a{
	display:block;
	height:30px;
	padding:0 20px;
	color:#fff;
	line-height:30px;
	text-decoration:none;
}
.atb .tab-nav li .actived{background-color:#fff;}
.atb .tab-nav li .actived a{color:#777}
.tab .content-wrap{
	background-color:#fff;
	padding:5px;
	height:200px;
}
.tab .content-wrap .content-item{
	height:200px;
	display:none;
}
.tab .content-wrap .current{
	display:block;
}

            

                
本项目引用的自定义外部资源