我有 Bootstrap 选项卡的工作代码。我可以在其中添加和删除选项卡。当选项卡溢出时还显示向下箭头。因此用户可以单击箭头以查看有多少选项卡可用。 问题:
- 当我从下拉菜单中单击选项卡时,它使其处于事件状态但不会向左滚动。这样用户就可以在顶部看到事件选项卡。
- 添加和删除按钮有效。但是当选项卡溢出时,它会显示新的加号图标来添加新的添加。那我就删不掉了。 (可能是 DOM 准备就绪的问题。)尝试在单击时执行文档。但这没有用。
- 同样,当我尝试从下拉菜单中删除选项卡时,它并没有删除。
谢谢你...
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.当我点击粉红色栏中的垃圾桶时,我得到了 dashboard-content
作为 contentId 并且当我在下拉列表中单击时,我得到了 overview-content
.两者不相同,因此在下拉列表中删除不起作用。
第三个问题的可能修复方法是将 overview-content
替换为 dashboard-content
,看起来函数 removeTab 的逻辑不正确。
关于javascript - 显示或使可见的事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32973280/