2016-09-19 53 views
0

當用戶點擊標籤下一個標籤和任何標籤時,添加類,但現在我需要在用戶點擊和上一個標籤時刪除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

回答

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

    } 

}); 
+0

感謝你最大的努力。但我需要你多一點幫助。 當我點擊所有標籤後,我點擊第三個標籤,然後第4或第5個麪包屑是聯合國選定的。不斷地當我點擊1或0選項卡什麼都沒有發生時,請你解決這個問題。 –

+0

簡而言之:如果我們在第4個選項卡上(不管之前是否完成了所有選項卡),並嘗試使用較低的數字選項卡,則所有其他較高的選項卡應標記爲未完成。這個陳述是正確的嗎? – vijayP

0

您可以使用$(本)獲得當前元素,然後獲得它的父和搜索父爲使用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); 
}); 

你可以檢查一個工作的例子從你的小提琴分叉在這個fi ddle https://jsfiddle.net/mn6khese/

相關問題