13518219792
网站建设资讯

NEWS

网站建设资讯

js中如何封装选项卡

这篇文章将为大家详细讲解有关js中如何封装选项卡，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

为企业提供成都网站制作、成都网站设计、网站优化、营销型网站、竞价托管、品牌运营等营销获客服务。成都创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

这个插件对应的html的结构如下


    
      页卡一
      
  • 页卡二
    • 
      
  • 页卡三
    • 
    
    
      
    1
    
      
    2
    
      
    3
    
      
    4
    
    
        
    内容二
        
    内容三
      

    版本1

    //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultIndex:默认选中项的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //让defaultIndex对应的页卡有选中的样式
    defaultIndex = defaultIndex || 0;
    utils.addClass(oLis[defaultIndex],"select");
    utils.addClass(divList[defaultIndex],"select");
    //具体的切换功能
    for(var i = 0;i
    版本2(将for循环改为使用事件委托的方式)
    //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultIndex:默认选中项的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //让defaultIndex对应的页卡有选中的样式
    defaultIndex = defaultIndex || 0;
    utils.addClass(oLis[defaultIndex],"select");
    utils.addClass(divList[defaultIndex],"select");
    //具体的切换功能
    
    //使用事件委托优化
    tabFirst.onclick = function(e){
      e = e || window.event;
      e.target = e.target || e.srcElement;
      if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签
        detailFn.call(e.target,oLis,divList);

      }
    }
  }
  function detailFn(oLis,divList){
    var index = utils.index(this);
    utils.addClass(this,"select");
    for(var i = 0;i
    版本3:面向对象的方式，使用构造函数
    //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultIndex:默认选中项的索引
  */


  function TabChange(container,defaultIndex){
    this.init(container,defaultIndex);

  }
  TabChange.prototype = {
    constructor:TabChange,//注意重写原型方法，需要重新指定构造器
    //初始化 ，也是当前插件的唯一入口
    init:function(container,defaultIndex){
      this.container = container || null;
      this.defaultIndex = defaultIndex || 0;
      this.tabFirst = utils.firstChild(this.container);
      this.oLis = utils.children(this.tabFirst);
      this.divList = utils.children(this.container,"div");

      this.defaultIndexEven();
      this.liveClick();
      return this;
    },
    //事件委托实现绑定切换
    liveClick:function(){
      var _this = this;
      this.tabFirst.onclick = function(e){
        e = e || window.event;
        e.target = e.target || e.srcElement;
        if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签
          _this.detailFn(e.target);

        }
      }
    },
    detailFn:function(curEle){
      var index = utils.index(curEle);
      utils.addClass(curEle,"select");
      for(var i = 0;i
    关于“js中如何封装选项卡”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
                
            
                        
    
            名称栏目：js中如何封装选项卡            
    
            网页URL：http://cdysf.com/article/gpdcpe.html

    其他资讯