显示或显示可见的活动标签

我有引导标签的工作代码。 在哪里我可以添加和删除选项卡。 当标签溢出时,也会显示向下箭头。 因此,用户可以单击箭头以查看可用的选项卡数量。 问题:

  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) = 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 $('
  • tab ' + nextTab + '
  • ').insertBefore(addTabLast); $('
  • tab ' + nextTab + '
  • ').insertBefore(addTabLastDropDown); // create the tab content $('
    tab' + nextTab + ' content
    ').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);

    我找到的问题

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

    第3个问题的可能修复是将overview-content替换为dashboard-content ,它看起来像函数removeTab具有不正确的逻辑。