选项卡不仅仅是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{ 1000px;} .hbox div{ float:left; 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"}); }); }); 以上效果均是工作中所积累的经验,总结的不足之处还望谅解。