当用户单击上一个选项卡时从面包屑中删除 class

Question

Class 当用户单击下一个选项卡和任何选项卡时添加，但现在我需要删除 class="tbcb" 当用户单击和上一个选项卡时。就像当我单击所有选项卡然后单击第 4 个或第 1 个选项卡时，将所有具有活动面包屑或上一个面包屑的下一个面包屑的面包屑颜色更改为灰色。

// 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 1

您可以使用 $(this) 获取当前元素，然后获取它的父元素，并使用 div class 在父元素中搜索您的 div，就像这样

<div class="boxwrap">
    <a href="javascript:;" class="button" id="button1">Go</a>
    <div class="boxwrap_inner noDisplay" id="content1">
        Content goes here
    </div>
</div>
<div class="boxwrap">
    <a href="javascript:;" class="button" id="button2">Go</a>
    <div class="boxwrap_inner noDisplay" id="content2">
        Content goes here
    </div>
</div>

JS:

$('.button').click(function () {
    $(this).parent().find(".boxwrap_inner").slideToggle(200);
});

您可以在 fiddle https://jsfiddle.net/mn6khese/

上检查从您的 fiddle 派生的工作示例

Answer 2

如果我对您的理解正确，那么我认为您需要这种行为：

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');
     });

   }

 });

当用户单击上一个选项卡时从面包屑中删除 class

Removing class from breadcrumb when user click on previous tab

jquery

tabs

breadcrumbs

twitter-bootstrap