通過數據選項卡觸發jquery選項卡

Question

我已經在這裏檢查過，但沒有找到我的答案。我有我的代碼如下：

<div class="gdlr-session-item gdlr-tab-session-item gdlr-item"> 
<div class="gdlr-session-item-head"> 
<div class="gdlr-session-item-head-info gdlr-active" data-tab="gdlr-tab-1"> 
<div class="gdlr-session-head-day">Day 1</div> 
<div class="gdlr-session-head-date">23 May 2016</div> 
</div> 

<div class="gdlr-session-item-head-info" data-tab="gdlr-tab-2"> 
<div class="gdlr-session-head-day">Day 2</div> 
<div class="gdlr-session-head-date">24 May 2016</div> 
</div> 

<div class="gdlr-session-item-tab-content gdlr-tab-1 gdlr-active" style="display: block;"> 
Content here 
</div> 
<div class="gdlr-session-item-tab-content gdlr-tab-2" style="display: none;"> 
Content here 
</div> 
</div> 
</div> 

jQuery代碼：

// script for session tab item 
    $('.gdlr-session-item-head-info').click(function(){ 
    if($(this).hasClass('gdlr-active')) return; 
    $(this).siblings().removeClass('gdlr-active'); 
    $(this).addClass('gdlr-active'); 

    var selected_tab = $(this).attr('data-tab'); 
    $(this).parent('.gdlr-session-item-head').siblings('.gdlr-session-item-tab-content').hide(); 
    $(this).parent('.gdlr-session-item-head').siblings('.' + selected_tab).fadeIn(); 
}); 

在默認情況下，第1天將激活並顯示從類內容：gdlr標籤-1。

我需要幫助來激活第2天而不是第1天。非常感謝所有的幫助！

現場演示：http://goodlayers.tienloc.net/keynote/。

Answer 1

檢查下面的代碼是否有幫助。

您可以先隱藏所有內容div，然後使用數據attr顯示（淡入）所需div，同樣適用於添加和刪除活動類。

$('.gdlr-session-item-head-info').click(function(){ 
    if($(this).hasClass('gdlr-active')) return; 
    $('.gdlr-active').removeClass('gdlr-active'); 
    $(this).addClass('gdlr-active'); 

    var selected_tab = $(this).attr('data-tab'); 
    $(".gdlr-session-item-tab-content").hide(); 
    $("."+selected_tab).addClass('gdlr-active'); 
    $("."+selected_tab).fadeIn();  
});