Usman Ali Usman Ali - 2 months ago 6
jQuery Question

Removing class from breadcrumb when user click on previous tab

Class is added when user click on tabs next tab and any tab but now i need remove class="tbcb" when user click on and previous tab. Like when i click on all tabs and then i click on 4th or 1st tab change the color of breadcrumb green to grey for all next breadcrumb with active or previous breadcrumb.

// breadcrumb code is here
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).addClass('fn'); // activated tab
if(target.hasClass('fn')){
target.closest('.tab-link').find('#tbcp').addClass('tbcb');
//alert("success");
}else{
target.closest('.tab-link').css('display' , 'none');
}
});


Example

Answer

If I understood you correctly then I think you need this behavior:

https://jsfiddle.net/pod4fob1/7/

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
   var target = $(e.target).addClass('fn'); // activated tab

   if ($(".tbcb").length < $(".tab-link").length) {
     target.closest('.tab-link').find('#tbcp').addClass('tbcb');
   } else {
     var index_1 = target.closest('.tab-link').index();

     $(".tab-link:gt(" + index_1 + ")").each(function() {
       $(this).find('#tbcp').removeClass('tbcb');
     });

   }

 });
Comments