Javascript 显示或使活动选项卡可见

我有引导标签的工作代码。我可以在其中添加和删除选项卡。当选项卡溢出时，还显示向下箭头。所以用户可以点击箭头查看有多少选项卡可用。 问题：

当我从下拉菜单中点击tab时，它会激活，但不会向左滚动。这样用户就可以看到顶部的活动选项卡

添加和删除按钮可以工作。但当选项卡溢出时，它会显示new plus图标以添加新的添加。那我就不能删除了。（可能是DOM就绪时出现问题。）尝试在单击时执行文档。但那没用

当我尝试从下拉菜单中删除选项卡时，它不会删除 谢谢你

chkPlusIcon();

 function chkPlusIcon() {
     setTimeout(function () {
         var pageWidth = $(".pull-left-db-nav-tabs").width();
         var lastElementLi = $(".db-nav-tabs");
         var elementWidth = $(lastElementLi).width();
         var elementLeft = $(lastElementLi).position().left;

         $('.pull-right-db-nav-tabs-ul').empty();
         if (pageWidth - (elementWidth + elementLeft) < 0) {
             console.log("overflow!");
             $('.pull-right-db-nav-tabs').css('display', 'block');
             if ($('.pull-right-db-nav-tabs-ul li') >= 1) {} else {
                 $('.db-nav-tabs > li').clone().appendTo('.pull-right-db-nav-tabs-ul');
             } /*  $('.add-tab-last').css('display','none');*/

         } else {
             console.log("doesn't overflow");
             $('.pull-right-db-nav-tabs').css('display', 'none');
             $('.pull-right-db-nav-tabs-ul').empty();

         }
     }, 500);
 }
 $(window).resize(function () {
     chkPlusIcon();
 });


 //  add New tabs


 var tabCount = 9;
 //$('.db-add-new-tab').click(function (e) {
 $(document).on('click', '.db-add-new-tab', function (e) {
     console.log('add tab button clicked');
     chkPlusIcon();
     tabCount++;
     var nextTab = tabCount;
     var addTabLast = $('.db-nav-tabs li.add-tab-last');
     var addTabLastDropDown = $('.pull-right-db-nav-tabs-u li.add-tab-last');
     // create the tab
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLast);
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLastDropDown);
     // create the tab content
     $('<div class="tab-pane fade in" id="tab' + nextTab + '">tab' + nextTab + ' content</div>').appendTo('.tab-content');
     // make the new tab active

     $('#tabs').find('.glyphicon-trash').click(removeTab);


     $('#tabs a:last').tab('show');
 });



 // remove tab

 var removeTab = function () {
     chkPlusIcon();

     var contentId = $(this).closest('li').find('a').attr('href');
     contentId = contentId.replace('#', '');
     $('#' + contentId).remove();
     $(this).closest('li').remove();

     //$('.pull-right-db-nav-tabs-ul').find('#' + contentId).remove();
     //$('#tabs a:first').tab('show');
     $('#tabs a:first').tab('show');
 };

 $('.db-del-tab').click(removeTab);

chkPlusIcon（）；
函数chkPlusIcon（）{
setTimeout（函数（）{
var pageWidth=$（“.pull left db nav tabs”）.width（）；
var lastElementLi=$（“.db导航选项卡”）；
var elementWidth=$（lastElementLi）.width（）；
var elementLeft=$（lastElementLi）.position（）.left；
$（'.pull right db nav tabs ul'）.empty（）；
如果（页面宽度-（elementWidth+elementLeft）<0）{
log（“溢出！”）；
$（'.pull right db nav tabs'）.css（'display'，'block'）；
如果（$（'.pull right db nav tabs ul li'）>=1）{else{
$（'.db nav tabs>li'）.clone（）.appendTo（'.pull right db nav tabs ul'）；
}/*$（'.add tab last'）.css（'display'，'none'）*/
}否则{
log（“不溢出”）；
$（'.pull right db nav tabs'）.css（'display'，'none'）；
$（'.pull right db nav tabs ul'）.empty（）；
}
}, 500);
}
$（窗口）。调整大小（函数（）{
chkPlusIcon（）；
});
//添加新选项卡
var-tabCount=9；
//$（'.db添加新选项卡'）。单击（函数（e）{
$（文档）.on（'单击'，'.db添加新选项卡'，函数（e）{
log（'单击添加选项卡按钮'）；
chkPlusIcon（）；
tabCount++；
var nextTab=tabCount；
var addTabLast=$（'.db nav tabs li.add tab last'）；
var addTabLastDropDown=$（'.pull-right-db-nav-tabs-u li.add tab last'）；
//创建选项卡
$（“
”）。在之前插入（addTabLast）；
$（“
”）。在之前插入（addTabLastDropDown）；
//创建选项卡内容
$（'tab'+nextTab+'content'）。附录（'tab content'）；
//使新选项卡处于活动状态
$（“#选项卡”）。查找（“.glyphicon垃圾箱”）。单击（移除选项卡）；
$（#制表符a:last'）。制表符（'show'）；
});
//移除标签
var removeTab=函数（）{
chkPlusIcon（）；
var contentId=$（this.nexist（'li'）.find（'a'）.attr（'href'）；
contentId=contentId.replace（'#'，''）；
$（'#'+contentId）.remove（）；
$（this）.最近（'li'）.remove（）；
//$（'.pull right db nav tabs ul'）。查找（'#'+contentId）。删除（）；
//$（#制表符a:first'）。制表符（'show'）；
$（#制表符a:first'）。制表符（'show'）；
};
$（“.db del选项卡”）。单击（删除选项卡）；

我发现的问题

1.你没有给粉色div溢出，你怎么能滚动它。我认为这是不可能的。
2.无法复制此问题。
3.当我点击粉色栏中的垃圾时，我得到了

仪表板内容

作为内容ID，当我在下拉列表中点击时，我得到了

概述内容

。两者不相同，因此下拉列表中的删除不起作用

---

第三个问题的可能修复方法是将

概述内容

替换为

仪表板内容

，看起来函数删除选项卡的逻辑不正确。

谢谢您的回复。我检查了3点，发现问题并修复了它。谢谢。一旦我解决了所有问题，我将在此处更新。请查看我的新问题。or-jsfiddle