Add / Remove Tabs Dynamically in Bootstrap - Create a tab created created
source link: https://www.codesd.com/item/add-remove-tabs-dynamically-in-bootstrap-create-a-tab-created-created.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Add / Remove Tabs Dynamically in Bootstrap - Create a tab created created
Here is the snippet to dynamically add / remove bootstrap tabs. Everything works fine, but I would like newly created tab to be active and in focus rather than the tab used to dynamically add a tab.
This is fiddle: http://jsfiddle.net/isherwood/F33Av/4/
And this is code in question:
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>
$(".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>');
});
@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;
}
Here is a solution:
See JSFiddle
The
tab('show')
is still being called when the "Add Contact" navlink is clicked. Even though the show tab function is called, no tab content is being displayed because it has no existing contents linked to it. What I did is to add a condition to stop activating that tab.$(".nav-tabs").on("click", "a", function (e) { e.preventDefault(); if (!$(this).hasClass('add-contact')) { $(this).tab('show'); } })
I also removed the
data-toggle="tab"
attribute to the "Add Contact" navlink. For some reason, it activates the "Add Contact" tab if it's there.<li><a href="#" class="add-contact">+ Add Contact</a></li>
Upon adding a new tab, trigger the
click
of the new tab so that thetab('show')
function will be called. (see 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(); });
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK