最近在给一个客户做一个zblog模板的时候需要用到一个页面中多处使用tab切换特效,做完后把代码整理了下,如果你也正好有此需求,直接复制代码即可。
tab切换js代码 一个页面可多处使用--js代码部分:
<script> var fgm = { $: function(id) { return typeof id === "object" ? id : document.getElementById(id); }, $$: function(tagName, oParent) { return (oParent || document).getElementsByTagName(tagName); }, $$$: function(className, element, tagName) { var i = 0, aClass = [], reClass = new RegExp("(^|\\s)" + className + "(\\s|$)"), aElement = fgm.$$(tagName || "*", element || document); for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]); return aClass; }, index: function(element) { var aChildren = element.parentNode.children, i; for(i = 0; i < aChildren.length; i++) if(aChildren[i] === element) return i; return -1; }, on: function(element, type, handler) { return element.addEventListener ? element.addEventListener(type, handler, !1) : element.attachEvent("on" + type, handler); }, bind: function(object, handler) { return function() { return handler.apply(object, arguments); }; } }; function Tab(id) { var that = this; this.obj = fgm.$(id); this.oTab = fgm.$$$("tab", this.obj)[0]; this.aTab = fgm.$$("li", this.oTab); this.oSwitch = fgm.$$$("switchBtn", this.oTab)[0]; this.oPrev = fgm.$$("a", this.oSwitch)[0]; this.oNext = fgm.$$("a", this.oSwitch)[1]; this.aItems = fgm.$$$("items", this.obj); this.iNow = 0; fgm.on(this.oSwitch, "click", fgm.bind(this, this.fnClick)); fgm.on(this.oTab, "click", fgm.bind(this, this.fnMouseOver)); } Tab.prototype = { fnMouseOver: function(ev) { var oEv = ev || event, oTarget = oEv.target || oEv.srcElement; oTarget.tagName.toUpperCase() === "LI" && (this.iNow = fgm.index(oTarget)); this.fnSwitch(); }, fnClick: function(ev) { var oEv = ev || event, oTarget = oEv.target || oEv.srcElement, i; switch(fgm.index(oTarget)) { case 0: if(oTarget.className == "prev") { this.aTab[this.iNow].style.display = "block"; this.iNow--; }; break; case 1: if(oTarget.className == "next") { for(i = 0; i < this.iNow; i++) this.aTab[i].style.display = "none"; this.iNow++; }; break; }; this.aTab[this.iNow].style.display = "block"; this.fnSwitch(); }, fnSwitch: function() { for(var i = 0; i < this.aTab.length; i++) (this.aTab[i].className = "", this.aItems[i].style.display = "none"); this.aTab[this.iNow].className = "current"; this.aItems[this.iNow].style.display = "block"; this.oPrev.className = this.iNow == 0 ? "prevNot" : "prev"; this.oNext.className = this.iNow == this.aTab.length - 1 ? "nextNot" : "next"; } }; //应用 fgm.on(window, "load", function() { var aItem = fgm.$$$("item"), i = 0; for(; i < aItem.length; i++) new Tab(aItem[i]); }); </script>
注意,此js代码需要放在页面的</head>之前。
tab切换js代码 一个页面可多处使用--html代码部分:
<div class="item"> <div class="tab"> <ul> <li class="current">标题一</li> <li>标题二</li> <li>标题三</li> </ul> <span class="switchBtn"><a href="#" class="prevNot"></a><a href="#" class="next"></a></span> </div> <ul class="items" style="display:block;"> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> </ul> <ul class="items"> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> </ul> <ul class="items"> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> <li><a href="#">列表标题</a></li> </ul> </div>
此html代码可以在页面多处位置使用不会冲突,可以给"<ul>"或者"<div>"添加id属性,以实现不同位置不同显示效果。css代码就不上,可以根据自己的具体需求慢慢调整的,希望对大家有用。
相关推荐
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 51.la统计的js文件被劫持了会跳转违法网站09-27
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
- zblog获取全部分类列表函数GetCategoryList的参数和使用方法介绍说明03-30
- emlog通过分类id获取指定分类的标题链接等数据03-20
- 小皮面板(phpstudy)提示No input file specified的原因和解决办法03-07
- zblog获取当前页面的标题/链接/ID等属性02-02
- windows+phpstudy+Apache设置允许跨域请求的方法01-09
- 网站使用宝塔面板服务器cpu占用100%排查方法和解决方案01-04
- zblog应用中心如何开发票?在zblog应用中心购买应用后开发票流程11-29
- zblog模板文章发布时间格式详细说明11-23
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1网站日志×1tab标签×1邮件通知×1cms×1.zba×1小程序搭建步骤×1zblog文件×1阿里云2020采购×1祖国×1zblog视频×1文心一言×1bom头×1zblog大气企业模板×1zc升级×1小皮面板×1zblog商城主题×1网站地图×1修改logo×1三栏主题×1回老家
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求