js学习总结_选项卡封装(实例讲解)

2024-02-06 08:30:03 226

//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样 ~function(){ /* tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现 param：container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引 */ functiontabChange(container,defaultIndex){ vartabFirst=utils.firstChild(container),oLis=utils.children(tabFirst); vardivList=utils.children(container,"div"); //让defaultIndex对应的页卡有选中的样式 defaultIndex=defaultIndex||0; utils.addClass(oLis[defaultIndex],"select"); utils.addClass(divList[defaultIndex],"select"); //具体的切换功能 for(vari=0;i

版本2(将for循环改为使用事件委托的方式)

//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
/*
tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
param：container当前要实现选项卡的这个容器
defaultIndex:默认选中项的索引
*/
functiontabChange(container,defaultIndex){
vartabFirst=utils.firstChild(container),oLis=utils.children(tabFirst);
vardivList=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);

}
}
}
functiondetailFn(oLis,divList){
varindex=utils.index(this);
utils.addClass(this,"select");
for(vari=0;i
版本3:面向对象的方式，使用构造函数
//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
/*
tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
param：container当前要实现选项卡的这个容器
defaultIndex:默认选中项的索引
*/


functionTabChange(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();
returnthis;
},
//事件委托实现绑定切换
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){
varindex=utils.index(curEle);
utils.addClass(curEle,"select");
for(vari=0;i
以上这篇js学习总结_选项卡封装(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

js学习总结_选项卡封装(实例讲解)

热门推荐

随机推荐