Bootstrap 选项卡式导航故障答案

【问题标题】：Bootstrap Tabbed Navigation glitchBootstrap 选项卡式导航故障
【发布时间】：2017-10-07 21:18:49
【问题描述】：

我的网站上的选项卡式块存在一些问题。我在下面有一个演示链接。

首先，当我单击选项卡时，单击后它们不会保持活动状态。另外，我只想显示已单击的选项卡内容。现在，它只列出了所有 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/

【问题讨论】：

这是你想要的吗？ jsfiddle.net/czh8q2Le/1
嘿尼克 - 我认为这是我发布的原始链接 :)
编辑很完美 - 谢谢！！！！ :) 只是对 JS 的改动吗？
我会将其发布为解释它的解决方案。这更像是对您的 CSS 的更改
另外，请务必将其添加为答案，因为它是正确的，我想奖励你:)

标签： javascript jquery html twitter-bootstrap

【解决方案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');
});

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

【讨论】：