JS实现选项卡插件的两种写法（jQuery和class）

2023-07-07 13:51:04 73

编程

读书

运动

编程使我快乐

letlen=liList.length; for(leti=0;i

实现插件的第一种方法：jQuery

利用$.fn.extend方法，在jQuery上扩展一个选项卡功能的方法：

(function($){
functionclickLi(){
let$this=this,
$navBox=$this.find('.navBox'),
$liList=$navBox.find('li'),
$contentList=$this.find('div');

$liList.click(function(){
let$this=$(this),
index=$this.index();
$this.addClass('active').siblings().removeClass('active');
$contentList.eq(index).addClass('active').siblings().removeClass('active');
});
}

$.fn.extend({
tabClick:clickLi
});
})(jQuery);

使用方法：

let$tabBox=$('#tabBox');
$tabBox.tabClick();

实现插件的第二种方法：class

利用ES6中的class类，创建一个选项卡类Tab，并添加属性和方法，并且可以多参数传递实现选项卡：

(function(){
classTab{
constructor(selector,options){
//处理第一个参数
if(!selector)
thrownewReferenceError('Thefirstselectorparametermustbepassed~~');
if(typeofselector==='string')
this.container=document.querySelector(selector);
elseif(selector.nodeType)
this.container=selector;

this.initialParams(options);

this.navBox=this.container.querySelector('.navBox'),
this.liList=this.navBox.querySelectorAll('li'),
this.contentList=this.container.querySelectorAll('div'),
this.count=this.liList.length;

this.change();
this.handleLi();
}

//初始化参数
initialParams(options){
let_default={
showIndex:0,
triggerEvent:'click'
};

for(letkeyinoptions){
if(!options.hasOwnProperty(key))break;
_default[key]=options[key];
}

//把信息挂载到实例上
for(letkeyin_default){
if(!_default.hasOwnProperty(key))break;
this[key]=_default[key];
}
}

//切换标题
change(){
[].forEach.call(this.liList,(item,index)=>{
if(index===this.showIndex){
this.liList[index].className='active';
this.contentList[index].className='active';
return;
}
this.liList[index].className='';
this.contentList[index].className='';
});
}

//绑定标题对应的事件
handleLi(){
[].forEach.call(this.liList,(item,index)=>{
item.addEventListener(this.triggerEvent,()=>{
this.showIndex=index;
this.change();
});
});
}
}
window.Tab=Tab;
})();

使用方法：

newTab('#tabBox',{
showIndex:2,
triggerEvent:'mouseenter'
});

第二种方法是现在常用的方法，因为它可以传递很多参数。可以根据需求，设置默认要传递的参数，将这个选项卡插件做的更完善。

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS实现选项卡插件的两种写法（jQuery和class）

热门推荐

随机推荐