引导选项卡式导航故障

Question

我的网站上的选项卡式块遇到了一些问题。我在底部有一个演示链接。

首先，当我单击选项卡时，它们在单击后不会保持活动状态。另外，我只想显示已单击的选项卡内容。现在，它只列出了所有 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 中将div 的当前标签替换为这样的show-tab（这使得最初显示第一个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');
});

希望这有帮助。这是一个工作小提琴：https://jsfiddle.net/czh8q2Le/1/