在引导中动态添加/删除选项卡-使创建的选项卡活跃
Add / Remove Tabs Dynamically in Bootstrap - Make created tab active
下面是动态添加/删除引导选项卡的代码片段。一切都很好,但我希望新创建的选项卡是活跃的,而不是用于动态添加选项卡的选项卡。
这是小提琴:http://jsfiddle.net/isherwood/F33Av/4/
下面的代码:
HTML:<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
<li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
<li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
<div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
</div>
</div>
JS:
$(".nav-tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
.on("click", "span", function () {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
$('.add-contact').click(function(e) {
e.preventDefault();
var id = $(".nav-tabs").children().length; //think about it ;)
$(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');
$('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
});
CSS: @import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs > li {
position:relative;
}
.nav-tabs > li > a {
display:inline-block;
}
.nav-tabs > li > span {
display:none;
cursor:pointer;
position:absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs > li:hover > span {
display: inline-block;
}
解决方案:
看到JSFiddle
-
当添加联系人时,
tab('show')
仍在被调用。单击Navlink。即使调用了show tab函数,也不会显示任何选项卡内容,因为它没有链接到它的现有内容。我所做的是添加一个条件来停止激活该选项卡。$(".nav-tabs").on("click", "a", function (e) { e.preventDefault(); if (!$(this).hasClass('add-contact')) { $(this).tab('show'); } })
-
我还删除了"添加联系人"的
data-toggle="tab"
属性。navlink。由于某种原因,它激活了"添加联系人"。<li><a href="#" class="add-contact">+ Add Contact</a></li>
-
在添加新选项卡时,触发新选项卡的
click
,以便调用tab('show')
函数。(见1 )$('.add-contact').click(function (e) { e.preventDefault(); var id = $(".nav-tabs").children().length; //think about it ;) var tabId = 'contact_' + id; $(this).closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span>x</span></li>'); $('.tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>'); // add this $('.nav-tabs li:nth-child(' + id + ') a').click(); });
这是我找到的另一个解决方案:
JavaScript:$('#btnAdd').click(function (e) {
var nextTab = $('#tabs li').size()+1;
// create the tab
$('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');
// create the tab content
$('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
});
HTML: <div class="container">
<h1>Bootstrap Dynamic Tabs</h1>
<div class="well">
<a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i>Add Tab</a>
<br><br>
<ul class="nav nav-tabs" id="tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Hello tab #1 content...</div>
</div>
</div>
<a href="http://www.bootply.com/61679">Edit on Bootply</a>..
</div>
在这里演示和编辑https://www.bootply.com/61679
相关文章:
- 从动态创建的html选择中选择所选选项
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- 如何创建一个随机的计算机选项,除了你已经选择的选项
- 正在尝试创建一个选择选项
- 用CSS和Javascript创建一个选项卡系统
- 如何为下拉菜单中的不同选项创建不同数量的输入文本字段
- 使用来自 JSON 的 jquery 或 angularJS 的选项创建多个选择
- Javascript 使用下拉菜单选项创建文本字段
- 使用 JavaScript 和 AJAX 选项创建 Select HTML
- 根据选择中的选项创建选择组
- 为投递箱选项创建不同的默认值
- 选择2 - 使用预加载的选项创建 ajax
- 我可以使用 ng 选项创建指令(不使用选择标签)吗?
- 如何在弹出窗口中的同一页面上用下拉列表中的预选选项创建超链接
- 为iframe获取对象null.使用jsdom和所需选项创建iframe
- 从选择选项创建以毫秒为单位的日期数组;YYYY,M,D”;
- 如何创建一个基于下拉选项创建段落的Javascript表单
- 根据从下拉菜单中选择的选项创建查询字符串
- 当使用javascript时,我如何为一个选择的选项创建一个if语句