选项卡样式如图，请忽略丑陋的样式，样式可以随意更改
主要是基于jquery的extend扩展出的一个简单的选项卡插件，注意：这里封装的类使用的是es6中的class，所以不兼容ie8等低版本浏览器呦！想要兼容低版本可以参考思路，然后换成原生的构造函数原型继承方式
以下是 tabs.js 文件：
class Tabs{ constructor(that){ this.that=that; this.opt={//默认参数,不传走默认 eventN:'click', btns:['新闻','娱乐','游戏'], contents:['新闻1','娱乐1','游戏1'] } } init(opt){ //是否用默认参数 $.extend(this.opt,opt);//匹配传递进来的配置参数，有就覆盖，没有就用默认的 //创建按钮 this.creatButton(); //创建切换内容 this.creatContents(); //添加功能 this.events(this.opt.eventN); } creatButton(){ let html=``; this.opt.btns.forEach((e,i)=>{ html+=`<button class="${i===0?'action':''}">${e}</button>`; }); this.that.append(html); } creatContents(){ let html=``; this.opt.contents.forEach((e,i)=>{ html+=`<div class="${i===0?'show':''}">${e}</div>`; }); this.that.append(html); } events(evName){ let buts=this.that.find('button'), contents=this.that.find('div'); buts.on(evName,function () { buts.removeClass('action'); contents.removeClass('show'); $(this).addClass('action'); let inx=$(this).index('button'); contents.eq(inx).addClass('show'); }); } } $.fn.extend({ tabs:function (opt) { let t=new Tabs(this);//this是jq对象 t.init(opt); } })
调用方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> #app{ width: 210px; height: 100px; } #app button{ width: 70px; height: 44px; line-height: 44px; background: yellow; border:0; cursor: pointer; } #app button.action{ background: darkorange; } #app div{ display: none; width: 210px; background: slateblue; } #app div.show{ display: block; } </style> </head> <body> <section id="app"> </section> <script src="./jquery.js"></script> <script src="./tabs.js"></script> <script> $('#app').tabs({ eventN:'mouseover',//默认click btns:['新闻1','娱乐2','游戏1'], contents:['新闻内容','娱乐内容','游戏内容'] }); </script> </body> </html>
赋值代码，效果就可以呈现！