grey out other tabs and disable on click on active tabs jquery code example
Example 1: prevent click other tab bootstrap tabs
<ul class="nav nav-tabs" id="createNotTab">
<li class="active" ><a href="#home" data-toggle="tab">Step 1: Select Property</a></li>
<li class="disabled"><a href="#createnotification" data-toggle="" >Step 2: Create Notification</a></li>
</ul>
Example 2: prevent click other tab bootstrap tabs
var $tabs = $('#createNotTab li');
function showPrev() {
$tabs.filter('.active').prev('li').removeClass("disabled");
$tabs.filter('.active').prev('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");
})
}
function showNext() {
$tabs.filter('.active').next('li').removeClass("disabled");
$tabs.filter('.active').next('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");;
})
}