效果图

代码实现

const providerDiv = $(`<div></div>`)

const newTab = $(`<ul class="nav nav-tabs"></ul>`)
const tabContent=$(`<div class="tab-content" style="padding-top:20px"></div>`);


let newli1 = $(`<li class="active"><a class="aclick" href="#a" style="padding: 6px;10px" data-toggle="tab">标题一</a></li>`)
let contentTable1 = $(`<div class="tab-pane fade in active" id="a"></div>`);

let newli2 = $(`<li><a class="aclick" href="#b" style="padding: 6px;10px" data-toggle="tab">标题儿</a></li>`)
let contentTable2 =$(`<div class="tab-pane fade in" id="b"></div>`);

//此处是确保切换一定会触发，如果点击后，active属性未绑定class，也会在此处代码中绑定
newli1.find('a.aclick').on('click',function(){
  	var contentdom = $(this).parents('div.form-control').find(`div.tab-pane`)
   	if(contentdom.length>1){
        for(let j=0;j<contentdom.length;j++){
          //判断当前这个元素属性中是否包含active
          let flag = contentdom[j].className.indexOf('active') != -1
          if(j==0 && !flag){
              $(contentdom[j]).addClass('active')
          }else if(j!=0 && flag){
              $(contentdom[j]).removeClass('active')
          }
      }
  }
})
newli2.find('a.aclick').on('click',function(){
  	var contentdom = $(this).parents('div.form-control').find(`div.tab-pane`)
   	if(contentdom.length>1){
        for(let j=0;j<contentdom.length;j++){
          //判断当前这个元素属性中是否包含active
          let flag = contentdom[j].className.indexOf('active') != -1
          if(j==1 && !flag){
              $(contentdom[j]).addClass('active')
          }else if(j!=1 && flag){
              $(contentdom[j]).removeClass('active')
          }
      }
  }
})

contentTable1.append($(`<button>0</button>`));
contentTable2.append($(`<button>1</button>`));

newTab.append(newli1)
newTab.append(newli2)

tabContent.append(contentTable1);
tabContent.append(contentTable2);

//最外层的div插入
providerDiv.append(newTab);  
providerDiv.append(tabContent);