显示或使可见活动标签 [英] show or make visible active tab

问题描述

我有bootstrap标签的工作代码。在那里我可以添加和删除选项卡。当选项卡溢出时，还会显示向下箭头。因此用户可以单击箭头以查看有多少个选项卡可用。
问题：

I have working code of bootstrap tabs. where I can add and delete the tabs. Also shows the arrow down when tabs are overflowed. so user can click on arrow to see how many tabs are available. Problems:

1. 当我从下拉菜单中点击标签时，向左滚动。使用户可以在顶部查看活动标签。


2. 添加和删除按钮可以工作。但当选项卡溢出时，它显示新的加号图标添加新的添加。那么我不能删除。 （可能b问题与DOM准备好。）试图做点击文档。但是没有工作。


3. 当我尝试从下拉菜单中删除标签时，它不会删除。

谢谢...

示例Jsfiddle

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

推荐答案

我发现的问题

1.你没有给粉红色div溢出，你怎么能滚动它。我不认为这是可能的。

2.无法重现此问题。

3.当我点击粉红色栏中的垃圾桶，我得到信息中心-content 作为 contentId 和i当点击下拉，我得到 overview-content 。两者都不一样，所以在下拉列表中删除不工作。

1.You didn't give overflow to the pink div , how can you scroll it . i don't think it is possible.
2.Unable to reproduce this issue.
3.when i click on trash in pink bar i got dashboard-content as contentId and i when clicked in drop down i got overview-content. both are not same so delete in dropdown is not working.

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

Possible Fix for 3rd issue is replace overview-content with dashboard-content and it looks like function removeTab has incorrect logic.

这篇关于显示或使可见活动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！