Question

我的网站上有标签块的问题。我脚下有一个演示链接。

首先，当我点击标签时，点击后它们不会保持活动状态。此外，我只想显示已单击的选项卡内容。现在，它只列出了所有5个div。帮助

HTML：

JS：

   n m distance
5  4 4        0
7  4 6       -2
8  8 8       -8
10 5 4       -1

演示：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/

Bootstrap Tabbed Navigation故障

1 个答案: