最近在给一个客户做一个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代码就不上,可以根据自己的具体需求慢慢调整的,希望对大家有用。
相关推荐
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1wordpress在国内无法更新升级的解决办法03-02
- 2天兴工作室2021年春节放假通知02-08
- 3zblogphp1.7版本正式上线,附zblogphp1.7升级指南和注意事项02-08
- 4主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 5zblog判断插件是否安装或者启用的代码介绍01-16
- 6translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 7zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 8zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 9wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 标签聚合
- ×1本易M3V×1wang×1emlog图片主题×1电信运营商×1手机支付红包×1蓝色简洁模板×1zblogphp栏目文章×1神州行积分×1后台配色×1zblog数据能力×1充100送20×1联通套餐×1科技模板×1饭票×1放假×1生效规则×1zc升级×1zblogphp自适应×1zblog文章数×1畅言
最新评论
-
Q站网
更新的草率了,直接后台进不去了,最后去反馈群下载最新压缩包替换才好了。 -
鹏仔
服务器可以配置允许跨域,虚拟主机搭建的 调用api会出现跨域,天哥知道有啥解决办法没 -
访客
来个限时优惠 -
天兴工作室
不还价的 -
小马过河
能不能便宜点啊