tab切换效果

选项卡是一个神奇的网页效果，不论大小网站，比如B2B像阿里巴巴，慧聪网，还有B2C这个不用说了吧，爱逛网店的童鞋们都知道的，像京东商城，淘宝网，拍拍网，一号店，凡客诚品，等等各种网各种网店，选项卡不仅仅是tab切换还有很多的动画效果，爱学习的同学请作为参考，谢谢！

*学习者须有html+css基础：

选项卡的核心代码如下：

样式表现：

<style>

*{margin:0;padding:0;}

body{margin:0;padding:0; font-size:12px; color:#333;}

ul,li{ list-style:none;}

.box{ width:200px; height:200px; border:1px #666666 solid; margin:40px auto;}

.tab_title li{ float:left; width:50px; height:30px; cursor:pointer; text-align:center; line-height:30px; background:#CCC;}

.tab_title li.hover{ background:#999; color:#FFF;}

.main_box{ clear:both; height:170px; width:200px; overflow:hidden;}

.hbox{ height:1000px;}*/

.main_box div{ height:170px; text-align:center; line-height:60px; background:#333; color:#CCC;}

/*.hbox{ width:1000px;}

.hbox div{ float:left; width:200px; height:170px; text-align:center; line-height:60px; background:#333; color:#CCC;}

*/

</style>

Html结构

<div class="box">

<div class="tab_title">

<ul>

<li>选项1</li>

<li class="hover">选项2</li>

<li>选项3</li>

<li>选项4</li>

</ul>

</div>

<div class="main_box">

<div class="hbox">

<div>这是第1个盒子</div>

<div>这是第2个盒子</div>

<div>这是第3个盒子</div>

<div>这是第4个盒子</div>

</div>

</div>

</div>

脚本行为：

$( document).ready(function() {

$( ".tab_title li" ).mouseover(function(){

var index=$(this).index();

var height=$('.main_box div').height();

Var width=$('.hbox div').width();

$( this ).addClass( "hover" ).siblings().removeClass("hover");

//效果1      突隐突现

//$( ".main_box div").hide().eq(index).show();

//效果2     左隐左现

//$( ".main_box div").hide("fast").eq(index).show("slow");

//效果3     渐隐渐现

//$( ".main_box div").fadeOut("fast").eq(index).fadeIn(500);

//效果4     向下显示   向上隐藏

//$(".main_box div").slideUp().eq(index).slideDown();

//效果5     轮播式 上下显示

//$( ".hbox" ).stop().animate({'marginTop':-height*index},500);

//效果6     轮播式 左右显示

//$( ".hbox" ).stop().animate({'marginLeft':-width*index},500);

以上六种选项卡效果5，效果6 可以在css用定位也可不用， 如果喜欢用定位的同学应改下效果5，效果6 脚本，marginTop改成top，marginLeft改成left，即可呈现一样的效果体验。

以上六种选项卡效果均可升级，有很多选项卡鼠标滑过的时候有连连出现的状况，特别是鼠标快速来回选择的时候，可能会出现贴贴撞撞那种状态，解决方法给鼠标滑过的时候加延迟效果，会达到很好的效果：

var repeat;

$(".tab_title li").mouseover(function(){

var index=$(this).index();

var $this=$(this);

//定时器所在

repeat=setInterval(function(){

$this.addClass('hover').siblings().removeClass('hover');

$( ".hbox div").hide().eq(index).show();

},500);

$(this).mouseout(function(){clearInterval(repeat)})

});

以上六种选项卡效果均可封装函数，有很多页面中会出现两个或两个以上选项卡效果，封装为函数调用即可：

function tabf(obj1,obj2,hover){

obj1.click(function(){

var index=$(this).index();

$(this).addClass(hover).siblings().removeClass(hover);

obj2.hide().eq(index).show();

})；

tabf($(".tab_title li"),$(".hbox div"),"hover");//此处是给函数传参数，调用函数

以上六种选项卡效果均可自动选项，有很多新闻信息门户网站等一些各种网络信息，选项卡可以自动更换内容，可以鼠标滑过看内容，更好的体验效果：

var repeat,

num=0,

index=$(".tab_title li").size();

$(".tab_title li").mouseover(function(){

var index=$(this).index();

$(this).addClass("hover").siblings().removeClass("hover");

$(".hbox div").stop().hide().eq(index).show();

});

$(".box").hover(function(){

clearInterval(repeat)

},function(){

repeat=setInterval(function(){

$(".tab_title li").eq(num).addClass("hover").siblings().removeClass("hover");

$(".hbox div").stop().hide().eq(num).show();

num++;

if(num>=index){num=0}

},1000)

}).trigger('mouseout')；

选项卡插件封装方法，仅供参考学习：

(function(){

$.fn.donghua=function(options){

defaults={

boxli:"lis",

add:"hover",

main:""

};

var optionsed=$.extend(defaults,options);

var obj=$(this);

var lih=obj.find("li");

var $main=optionsed.main;

lih.mouseover(function(){

var index=lih.index(this);

var $this=$(this);

repeat=setInterval(function(){

$this.addClass(optionsed.add).siblings().removeClass(optionsed.add)

$(".hbox div").stop().hide().eq(index).show();

},500)

$(this).mouseout(function(){clearInterval(repeat)})

});

}

})(jQuery);

//此处为调用插件

$( document).ready(function(e) {

$(".box").donghua({boxli:"tab_title li",add:"hover",main:"hbox div"});

});

});

以上效果均是工作中所积累的经验，总结的不足之处还望谅解，希望一起学习共进步！