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-tab-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();    
});

触发jquery选项卡由data-tab激活

1 个答案: