• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

国内首家协议开发

软芯音视解码保护平台

在线
客服

发布
需求

在线
聊天

天盟
APP

天盟APP下载

关注
微信

微信扫一扫访问
顶部

请教:怎样用jquery封装一个面向对象的选项卡

最近用原生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代码:
                                               
                                   
  • 1                               
  • 2                               
  • 3                       
               
                                       
                                   
  • 内容1                               
  • 内容2                               
  • 内容3                       
               
       
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

免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。

版权声明:作者保留权利,不代表天盟立场。

使用道具 举报

发新帖

发布任务需求已有1031167位用户正在使用天盟网服务

发布分类: *
任务预算: *
需求内容: *
手机号码: *
任务商家报价为
  • 预算价 :
  • 成交价 :
  • 完工期 :
  • 质保期 :

* 最终任务项目以服务商报价、双方协商为准!