ホームページ >ウェブフロントエンド >jsチュートリアル >jsタブのカプセル化チュートリアル
このプラグインに対応するhtmlの構造は以下の通りです
<div> <ul> <li>页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div>内容二</div> <div>内容三</div> </div>
Version 1
//实现一个选项卡封装:我们可以分析出,只要多个选项卡的主体结构一样,那么每个实现的思想都是一样的,唯一不一样的就是最外层的盒子不一样~function(){/*tabChange:封装一个选项卡的插件,只要大结构保持统一,以后实现选项卡的功能,只需要调取这个方法执行即可实现 param:container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引*/function tabChange(container,defaultIndex){var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);var divList = utils.children(container,"div");//让defaultIndex对应的页卡有选中的样式defaultIndex = defaultIndex || 0; utils.addClass(oLis[defaultIndex],"select"); utils.addClass(divList[defaultIndex],"select");//具体的切换功能for(var i = 0;i<olis.length></olis.length>
Version 2(forループをイベントデリゲーションを使用するように変更)
//实现一个选项卡封装:我们可以分析出,只要多个选项卡的主体结构一样,那么每个实现的思想都是一样的,唯一不一样的就是最外层的盒子不一样~function(){/*tabChange:封装一个选项卡的插件,只要大结构保持统一,以后实现选项卡的功能,只需要调取这个方法执行即可实现 param:container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引*/function tabChange(container,defaultIndex){var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);var divList = utils.children(container,"div");//让defaultIndex对应的页卡有选中的样式defaultIndex = defaultIndex || 0; utils.addClass(oLis[defaultIndex],"select"); utils.addClass(divList[defaultIndex],"select");//具体的切换功能 //使用事件委托优化 tabFirst.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement;if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签 detailFn.call(e.target,oLis,divList); } } }function detailFn(oLis,divList){var index = utils.index(this); utils.addClass(this,"select");for(var i = 0;i<olis.length> </olis.length>
バージョン 3: コンストラクターを使用したオブジェクト指向アプローチ
//实现一个选项卡封装:我们可以分析出,只要多个选项卡的主体结构一样,那么每个实现的思想都是一样的,唯一不一样的就是最外层的盒子不一样~function(){/*tabChange:封装一个选项卡的插件,只要大结构保持统一,以后实现选项卡的功能,只需要调取这个方法执行即可实现 param:container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引*/function TabChange(container,defaultIndex){this.init(container,defaultIndex); } TabChange.prototype = { constructor:TabChange,//注意重写原型方法,需要重新指定构造器//初始化 ,也是当前插件的唯一入口init:function(container,defaultIndex){this.container = container || null;this.defaultIndex = defaultIndex || 0;this.tabFirst = utils.firstChild(this.container);this.oLis = utils.children(this.tabFirst);this.divList = utils.children(this.container,"div");this.defaultIndexEven();this.liveClick();return this; },//事件委托实现绑定切换liveClick:function(){var _this = this;this.tabFirst.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement;if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签 _this.detailFn(e.target); } } }, detailFn:function(curEle){var index = utils.index(curEle); utils.addClass(curEle,"select");for(var i = 0;i<this.olis.length></this.olis.length>
以上がjsタブのカプセル化チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。