JS实现选项卡插件的两种写法(jQuery和class)
本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下
实现插件的几个注意点:
(1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等;
(2)选中时的样式提前确定;
(3)最好先用简单的JS实现选项卡的功能,再改为插件的模式。
html结构如下:
编程 读书 运动 编程使我快乐
读书使我幸福
运动使我健康
先用JS实现选项卡的功能:
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。