样式表现：
<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"});
});
});