javascript - Bootstrap 选项卡式导航故障

Question

我的网站上的选项卡式区 block 存在一些问题。我在这个底部有一个演示链接。

首先，当我单击选项卡时，它们在单击后不会保持事件状态。另外，我只想显示已单击的选项卡内容。现在，它只列出了所有 5 个 div。帮忙？

HTML:

JS:

$('ul.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        });

演示:https://jsfiddle.net/czh8q2Le/

Answer 1

您可以向 SCSS 添加一个名为 .show-tab 的新类

.show-tab {
  display: block;
}

此外，您还需要将以下属性添加到您的 .tab-content

.tab-content {
  display: none;
}

这允许您所有的 div 最初是不可见的，然后在将 .show-tab 类添加到 div 后使它们可见。

然后在您的 HTML 中用 show-tab 替换您当前的 div 标签(这使得第一个 div 最初显示)

<div class="tab-content show-tab" id="tab-pencil-pleat">
    1
</div>
<div class="tab-content" id="tab-delivery">
    2
</div>
<div class="tab-content" id="tab-eyelet">
    3
</div>
<div class="tab-content" id="tab-tabtop">
    4
</div>
<div class="tab-content" id="tab-wave">
    5
</div>

最后，只需更改您的 javascript 即可更改 show-tab 类，允许您将 .show-tab 添加到要显示的 div 中从您不想显示的 div 中删除 .show-tab:

$('ul.tabs li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('show-tab');

  $(this).addClass('current');
  $("#"+tab_id).addClass('show-tab');
});

希望这对您有所帮助。这是一个工作 fiddle :https://jsfiddle.net/czh8q2Le/1/