TAB标签选项卡切换效果

使用方法：

CSS样式

.lanrenzhijia{ width:500px; height:200px; margin:100px auto; background:#f0f0f0; font-family:'微软雅黑';}
.lanrenzhijia .tab{ overflow:hidden; background:#ccc;}
.lanrenzhijia .tab a{ display:block; padding:10px 20px; float:left; text-decoration:none; color:#333;}
.lanrenzhijia .tab a:hover{ background:#E64E3F; color:#fff; text-decoration:none;}
.lanrenzhijia .tab a.on{ background:#E64E3F; color:#fff; text-decoration:none;}
.lanrenzhijia .content{ overflow:hidden; padding:10px;}
.lanrenzhijia .content li{ display:none;}

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

插件初始化、参数配置

$(function(){
	$(".lanrenzhijia .tab a").mouseover(function(){
		$(this).addClass('on').siblings().removeClass('on');
		var index = $(this).index();
		number = index;
		$('.lanrenzhijia .content li').hide();
		$('.lanrenzhijia .content li:eq('+index+')').show();
	});
	
	var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.lanrenzhijia .tab a').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.lanrenzhijia .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
			$('.lanrenzhijia .content ul li:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠标悬停暂停切换
		$('.lanrenzhijia').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.lanrenzhijia').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});

HTML结构

<div class="lanrenzhijia">
	<div class="tab">
    	<a href="javascript:;" class="on">jQuery特效</a>
        <a href="javascript:;">源码分享</a>
        <a href="javascript:;">PHP/MySql</a>
        <a href="javascript:;">前端模版</a>
    </div>
    <div class="content">
    	<ul>
            <li style="display:block;">jQuery特效</li>
            <li>源码分享</li>
            <li>PHP/MySql</li>
            <li>前端模版</li>
        </ul>
    </div>
</div>