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

Question

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

1. 当我点击从下拉菜单标签中，将其激活，但不向左滚动。以便用户可以在顶部看到活动选项卡。
2. 添加和删除按钮的工作。但是当选项卡溢出时，它会显示新的加号图标以添加新添加。那么我不能删除。 （可能是DOM准备就绪的问题。）尝试单击文档。但那不起作用。
3. 同样，当我尝试从下拉菜单中删除标签，它不会删除。

谢谢...

Example Jsfiddle

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); 

Answer 1

我发现

1.You没有对粉红色的div给溢出问题，你怎么能滚动它。我不认为这是可能的。
2.无法重现此问题。
3.when当我点击粉红色的酒吧垃圾箱我得到dashboard-content为contentId和我点击下拉时，我得到overview-content。两者都不相同，所以在下拉菜单中删除不起作用。

第三个问题的可能的修复方法是用dashboard-content代替overview-content，它看起来像函数removeTab具有不正确的逻辑。