layui选项卡不重复增加删除避免冲突的简单方法，超实用-----网上的那些都是些啥，一个比一个复杂，啥也不是！_layui id冲突

作者：Monodyee | 2024-04-27 06:35:24

赞

踩

layui

id冲突

本来想偷个懒，网上搜搜吧，然而，都是复制粘贴的内容，根本没有考虑实际场景和性能问题，冗长的代码、负责的逻辑，别说人了，就是机器都要费时间参与计算，最后导致卡卡卡。。。。

哎，不说了，网上那些都啥也不是……

开始上代码了：

一、思路就是：将第一个固定，不参与选项卡计算，之后就好说了

 <div class="layui-tab" lay-filter="demo" lay-unauto lay-allowclose="true">
  <ul class="layui-tab-title">
    <li lay-id="indexsadmin" lay-attr="indexsadmin" class=""><i class="layui-icon layui-icon-home"></i>
    <i class="layui-icon layui-unselect layui-tab-close" style="display:none">ဆ</i>
    </li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show"><iframe src="admin/indexs.html"></iframe></div>
  </div>
</div>

二、简洁明了，写代码思路很重要。

var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
 
 var array = new Array();//选项卡数组
  function openadmin(content,id,title){      
      var ins = array.indexOf(id);     // 0
      if(ins!='-1'){
        //   element.tabChange('demo', id);//不推荐在if里面进行跳转选项卡
          
      } else{
           //新增一个Tab项
      element.tabAdd('demo', {
        title: title
        ,content: '<iframe src="'+"/admin"+content+'"></iframe>'
        ,id: id
      })
    uparr(id,1,0);
          
      }
      element.tabChange('demo', id);       
  }
 
  //选项卡新建
  element.on('tab(demo)', function(data){
      console.log($(this).attr('lay-id'))
  });
    
    //选项卡删除
    element.on('tabDelete(demo)', function(data){
      uparr(this.getAttribute("lay-id"),2,data.index);
      console.log(data.elem); //得到当前的Tab大容器
    });
 
 function uparr(data,is,index){
        //2=删除
        if(is==2){
            array.splice(index-1,1)
        }else if(is==1){
            //1=增加
            var ins = array.indexOf(data);     // 0
            if(ins=='-1'){
                 array.push(data)
            }           
            
        }
        
    }

三、由于删除回调只会传下表，并不会传id，所以还是要根据下标来判断，幸亏下标是动态的。

四、对了补充下，js中如果你是用的模块单独加载的，就用单独加载的方法引入element，如果是全局的就用全局的方法引入，文中的是全局方法，生产环境推荐全局加载方式，如果是调试环境推荐单独加载方式（可以定位具体的错误内容和信息）。

五、本来想设置付费的，毕竟全网独此一份，高效、快捷，很有实战性，不过考虑到网上都是一些水文，还是公开吧，我为人人，人人为我的精神还是要发扬的！

注：看了记得点个赞