写了个 大家经常会用到的 Tab 切换 效果

闲来无事，写了个大家经常会用到的 Tab 切换 效果

这是 css 

		<style type="text/css">
			*{margin: 0;padding: 0}
			.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
			.clearfix {display: inline-block}
			* html .clearfix {height: 1%}
			.clearfix {display: block}
			html,body{font: 12px/21px 'Microsoft YaHei',SimSun;background: #fff}
			.hide{display: none;}
			h1{text-align: center;padding: 20px 0}
			#container{width: 950px ;margin-left: auto;margin-right: auto;padding: 50px 0}
			.tab{width: 298px;overflow: hidden;margin-left: auto;margin-right: auto;border: 1px solid #e4e4e4}
			.tab .tab-title{background: #f7f5f4;padding: 6px 12px 0 12px;position: relative;}
			.tab .tab-title li{float: left;display: inline;margin-right: 10px;padding: 2px 12px;cursor: pointer;position: relative;z-index: 2;font-size: 14px}
			.tab .tab-title .on{color: #f60;background: #fff;border: 1px solid #e4e4e4;border-bottom: none;border-top: solid 2px #ff7214}
			.tab .tab-title .border{position: absolute;left:0;bottom: 0;height: 0;width: 100%;border-bottom: 1px solid #e4e4e4}
			.tab .tab-content{padding: 5px 10px}
		</style>

这是 html

		<div id="container">
			<h1>tab demo</h1>
			<div class="tab" id="tab1">
				<ul class="tab-title clearfix">
					<li class="on">手机充值</li>
					<li>彩票</li>
					<li>礼品卡</li>
					<div class="border"></div>
				</ul>
				<div class="tab-content">手机充值</div>
				<div class="tab-content hide">彩票</div>
				<div class="tab-content hide">礼品卡</div>
			</div>
		</div>

这是 js

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">

			(function($){
				$.fn.tab=function(config){
					var setting ={
						titleClass:"tab-title",
						contentClass:"tab-content",
						hoverClass:"on",
						autoPlay:false
					};
					
					setting = jQuery.extend(setting,config);
					var index = 0,
						handler = null,
						tab = $(this),
						tabTitle = tab.find("."+setting.titleClass).find("li"),
						tabContent = tab.find("."+setting.contentClass),
						l = tabTitle.length-1;

					tabTitle.bind({
						"mouseover":function(){
							index = tabTitle.index($(this));
							if(handler != null){
								clearInterval(handler);
							}
							showItem(index);
						},
						"mouseout":function(){
							if(setting.autoPlay){
								autoPlay();
							}
						}
					});

					if(setting.autoPlay){
						autoPlay();
					}

					function autoPlay(){
						handler = setInterval(function(){
							index++;
							if(index > l){
								index = 0;
							}
							showItem(index);
						},3000);
					}

					function showItem(index){
						tabTitle.removeClass(setting.hoverClass);
						$(tabTitle[index]).addClass(setting.hoverClass);
						tabContent.hide();
						$(tabContent[index]).show();
					}
				}
			})(jQuery);

			$("#tab1").tab();
		</script>

效果截图：