显示或显示可见的活动标签
我有引导标签的工作代码。 在哪里我可以添加和删除选项卡。 当标签溢出时,也会显示向下箭头。 因此,用户可以单击箭头以查看可用的选项卡数量。 问题:
- 当我从下拉菜单中单击选项卡时,它会使其处于活动状态,但不会向左滚动。 这样用户就可以看到顶部的活动标签。
- 添加和删除按钮工作。 但是当标签溢出并显示新的加号图标以添加新的添加。 然后我无法删除。 (可能是DOM准备好的问题。)试图在点击上做文件。 但那没用。
- 当我尝试从下拉菜单中删除选项卡时,它不会删除。
谢谢…
示例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具有不正确的逻辑。