[英]show or make visible active tab
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:
问题:
thank you... 谢谢...
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);
Issues I found 我发现的问题
1.You didn't give overflow to the pink div , how can you scroll it . 1.您没有给粉红色的div溢出,如何滚动它。 i don't think it is possible.
我认为这是不可能的。
2.Unable to reproduce this issue. 2.无法重现此问题。
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
. 3.当我单击粉红色栏中的垃圾桶时,我将
dashboard-content
作为contentId ;当我单击下拉菜单时,我将获得overview-content
。 both are not same so delete in dropdown is not working. 两者都不相同,因此下拉菜单中的删除无效。
Possible Fix for 3rd issue is replace overview-content
with dashboard-content
and it looks like function removeTab has incorrect logic. 第三个问题的可能解决方法是将
overview-content
替换为dashboard-content
,并且看起来函数removeTab的逻辑不正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.