效果图
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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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">匡威男棒球开衫外套2020</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 https://www.cnblogs.com/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 https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/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",//click css3:false, js:false, animation:"fade", activeIdx:0, interval:0, delay:0//是否延迟 }; Tab.prototype._init=function(){ var self=this; var timer=null; //init show this.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 event this.panels.on("show shown hide hidden",function(e){ self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),this]); //传递的参数:事件类型 触发事件的索引,触发事件的元素 }) //showHide init this.panels.showHide(this.options); //bind event this.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-item if(self.options.delay){//delay clearTimeout(timer);//先清除之前的定时器 timer=setTimeout(function(){ self.toggle(self.items.index(elem));//传入被点击的项的索引 },self.options.delay); }else{//no delay self.toggle(self.items.index(elem));//传入被点击的项的索引 } }) //auto if(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或者hide if(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",//click css3:false, js:false, animation:"fade", activeIdx:0, interval:500, delay:0//是否延迟 }); })(jQuery);
原文地址:https://www.cnblogs.com/chenyingying0/p/12384926.html
时间: 2024-10-30 03:26:14