顯示或顯示活動標簽

Question

我有引導選項卡的工作代碼。 我可以在其中添加和刪除標簽。 當選項卡溢出時，還會向下顯示箭頭。 因此用戶可以單擊箭頭查看有多少個選項卡可用。 問題：

1. 當我從下拉菜單中單擊選項卡時，它會變為活動狀態，但不會向左滾動。 這樣用戶可以在頂部看到活動標簽。
2. 添加和刪​​除按鈕起作用。 但是當標簽溢出時，它會顯示新的加號圖標以添加新的添加。 那我就不能刪除 （可能是DOM准備就緒的問題。）試圖在單擊時做文檔。 但這沒用。
3. 同樣，當我嘗試從下拉菜單中刪除選項卡時也不會刪除。

謝謝...

示例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.您沒有給粉紅色的div溢出，如何滾動它。 我認為這是不可能的。
2.無法重現此問題。
3.當我單擊粉紅色欄中的垃圾桶時，我將dashboard-content作為contentId ；當我單擊下拉菜單時，我將獲得overview-content 。 兩者都不相同，因此下拉菜單中的刪除無效。

第三個問題的可能解決方法是將overview-content替換為dashboard-content ，並且看起來函數removeTab的邏輯不正確。