最近用原生js封装了一个选项卡,但是我想要类似superslide那样调用的效果:
$('.tab').funTab({titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'});注解与需求:$('.tab')规定父选择器,一个规定各种参数集合的对象({titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'})作为参数传入函数。我的思路是:函数作为$('.tab')对象的方法来定义,但是感觉无从下手。贴下我用原生实现的代码吧。求大神帮忙实现jquery写法。
html代码:
css代码:
* { margin:0; padding:0;} li { list-style: none;} .clearfix:after { content: "" ; display: block ; height: 0 ; clear: both ; visibility: hidden ; } .tab-title li{ float: left; width: 100px; height: 50px; text-align: center;cursor:pointer; line-height: 50px;} .tab-title li.on { background: purple; color: #fff;} .tab-cont li { width: 300px; height: 300px;text-align: center; border: 1px solid #333;}js代码:
window.onload = function(){ var funTab = new FunTab('tab'); funTab.init('onmouseover','on'); //funTab.autoPlay(2000,'on'); //有bug }; //创建构造函数 function FunTab(id){ this.oTab = document.getElementById(id); this.tit = this.oTab.getElementsByTagName('ol'); this.cont = this.oTab.getElementsByTagName('ul'); this.titItem = this.tit[0].getElementsByTagName('li'); this.contItem = this.cont[0].getElementsByTagName('li'); this.iNow = 0; } //原型 FunTab.prototype = { init : function(trig,on){ var This = this; //设置触发方式、类名初始值 trig = trig || 'onclick'; on = on ? on : 'on'; for (var i=0;i |