效果图
tab.html
<!DOCTYPE html><html lang="zh-CN"><!-- 设置简体中文 --><head><meta charset="UTF-8"><title>tab</title><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/tab.css"><!-- css一般放在DOM加载前，防止DOM裸奔 --></head><body><!-- 楼层一 --><div class="floor"><div class="container"><div class="tab-head"><div class="tab-head-title fl"><span class="tab-head-title-num">1F</span><span class="tab-head-title-name">服装箱包</span></div><ul class="tab-head-item-wrap fr"><li class="fl"><a href="javascript:;" class="tab-head-item tab-head-item-active">大牌</a></li><li class="fl tab-head-item-divider text-hidden">分割线</li><li class="fl"><a href="javascript:;" class="tab-head-item">男装</a></li><li class="fl tab-head-item-divider text-hidden">分割线</li><li class="fl"><a href="javascript:;" class="tab-head-item">女装</a></li></ul></div><div class="tab-body"><ul class="tab-body-panel"><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li></ul><ul class="tab-body-panel"><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li></ul><ul class="tab-body-panel"><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li><li class="tab-body-panel-item fl"><p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p><p class="tab-body-panel-item-name">匡威男棒球开衫外套</p><p class="tab-body-panel-item-price">￥479</p></li></ul></div></div></div><script src="../js/jquery.js"></script><script src="../js/transition.js"></script><script src="../js/showhide.js"></script><script src="../js/tab.js"></script></body></html>
base.css/chenyingying0/p/12363689.html
tab.css
/*common*/.container{width:1200px;margin:0 auto;}.link{color:#4d555d;}a.link:hover{color:#f01414;}.fl{float:left;}/*文字隐藏*/.text-hidden{text-indent:-9999px;overflow:hidden;}/*showhide*/.fadeOut{opacity: 0;visibility: hidden;}.slideUpDownCollapse{height:0 !important;/*避免因为优先级不够而无法生效*/padding-top:0 !important;padding-bottom:0 !important;}.slideLeftRightCollapse{width:0 !important;/*避免因为优先级不够而无法生效*/padding-left:0 !important;padding-right:0 !important;}/*floor楼层区域*/.floor{margin-top:7px;}.tab-head{height:68px;border-bottom:1px solid #f01414;}.tab-head-title{margin-top:22px;}.tab-head-title-num{display: inline-block;width:24px;height:24px;border-radius:50%;background-color:#07111b;color:#fff;text-align: center;line-height:24px;margin-right:10px;}.tab-head-title-name{font-size:20px;color:#07111b;position: relative;top:3px;}.tab-head-item-wrap{margin-top:8px;height:62px;line-height:62px;}.tab-head-item{display: inline-block;font-size:14px; color:#93999f;margin-right:16px;}.tab-head-item-active{color:#f01414;background:url(../img/floor-arrow.png) center bottom no-repeat;}.tab-head-item-divider{display: inline-block;width:1px;height:14px;background-color:#d9dde1;margin-top:21px;margin-right:16px;}.tab-body{height:466px;}.tab-body-panel{height:466px;display: none;}.tab-body-panel-item{width:200px;height:233px;text-align: center;}.tab-body-panel-item:hover{box-shadow:0 0 10px rgba(0,0,0,.2);}.tab-body-panel-item-pic{margin-top:24px;}.tab-body-panel-item-name{margin-top:23px;font-size:12px;color:#07111b;}.tab-body-panel-item-price{margin-top:9px;font-size:14px;color:#f01414;}
transition.js/chenyingying0/p/12363649.html
showhide.js/chenyingying0/p/12363707.html
tab.js
(function($){"use strict";function Tab(elem,options){this.elem=elem;this.options=options;this.items=this.elem.find(".tab-head-item");//tab选项卡this.panels=this.elem.find(".tab-body-panel");//tab选项面板this.tabNum=this.items.length;//tab选项数量this.curIdx=this._getIdx(this.options.activeIdx);//当前选项卡索引this._init();//初始化 }//默认参数Tab.defaults={event:"mouseenter",//clickcss3:false,js:false,animation:"fade",activeIdx:0,interval:0,delay:0//是否延迟 };Tab.prototype._init=function(){var self=this;var timer=null;//init showthis.items.removeClass("tab-head-item-active");this.items.eq(this.curIdx).addClass("tab-head-item-active");//指定item添加样式this.panels.eq(this.curIdx).show();//指定panel显示//trigger eventthis.panels.on("show shown hide hidden",function(e){self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),this]);//传递的参数：事件类型 触发事件的索引，触发事件的元素 })//showHide initthis.panels.showHide(this.options);//bind eventthis.options.event=this.options.event==="click"?"click":"mouseenter";//事件代理，替被点击的tab项做代理this.elem.on(this.options.event,".tab-head-item",function(){var elem=this;//elem指向被点击的那个.tab-head-itemif(self.options.delay){//delayclearTimeout(timer);//先清除之前的定时器timer=setTimeout(function(){self.toggle(self.items.index(elem));//传入被点击的项的索引},self.options.delay);}else{//no delayself.toggle(self.items.index(elem));//传入被点击的项的索引 }})//autoif(this.options.interval && !isNaN(Number(this.options.interval))){this.elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));this.auto();}}//获取合理的索引Tab.prototype._getIdx=function(index){if(isNaN(Number(index))) return 0;if(Number(index)<0) return this.tabNum-1;if(Number(index)>this.tabNum-1) return 0;return index;}//切换面板Tab.prototype.toggle=function(index){if(this.curIdx===index) return;this.items.eq(this.curIdx).removeClass("tab-head-item-active");this.items.eq(index).addClass("tab-head-item-active");this.panels.eq(this.curIdx).showHide("hide");this.panels.eq(index).showHide("show");this.curIdx=index;}//自动切换Tab.prototype.auto=function(){var self=this;this.timer=setInterval(function(){self.toggle(self._getIdx(self.curIdx+1));},self.options.interval); }//停止Tab.prototype.pause=function(){clearInterval(this.timer); }//注册插件，相当于对外暴露接口 $.fn.extend({Tab:function(opt){//return this可以返回对象，方便连写return this.each(function(){var ui=$(this);var tab=ui.data("tab");//opt是参数对象var options=$.extend({},Tab.defaults,ui.data(),typeof opt==="object"&&opt);//单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化if(!tab){tab=new Tab(ui,options);ui.data("tab",tab);}//opt是show或者hideif(typeof tab[opt]==="function"){Tab[opt]();}});}});//调用tab插件var floor=$(".floor");floor.on("tab-show tab-shown tab-hide tab-hidden",function(e,type,index,elem){//根据自己需求来写 console.log(type);console.log(index);console.log(elem);})floor.Tab({event:"mouseenter",//clickcss3:false,js:false,animation:"fade",activeIdx:0,interval:500,delay:0//是否延迟 });})(jQuery);
![[05月]三月的梦：一个1200字的作文](https://1200zi.500zi.com/uploadfile/img/2024/05/27/c9a4c2fe45db391cf9c64ceb53b2c03e.jpg)
