Question

当用户单击选项卡下一个选项卡和任何选项卡时添加了类，但现在我需要在用户单击和上一个选项卡时删除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

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

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

   }

 });

Answer 2

您可以使用$（this）获取当前元素，然后获取它的父级并使用div类在父级内搜索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);
});

你可以在这个小提琴https://jsfiddle.net/mn6khese/

上查看你的小提琴分叉的工作示例

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

2 个答案: