Bootstrap 4选项卡式内容不起作用

Question

我正在尝试使用 Bootstrap 4 制作选项卡式内容，这对我来说非常新。这是我目前所拥有的：

.tabbed-sidebar {
  margin-top: 1.5rem;
  border: 1px solid #d9d9d9;
  max-width: 320px;
  margin: 10px auto;
}

.tabbed-sidebar .tabbed-heading {
  color: #333;
  background-color: #fafafa;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ccc;
  padding: 5px 5px 0 5px;
}

.tabbed-sidebar .nav-tabs {
  display: flex;
  border-bottom: none;
  margin-bottom: -1px;
}

.tabbed-sidebar .nav-tabs li {
 -webkit-flex: 1;
 -ms-flex: 1;
  flex: 1;
  padding-right: 1px;
}

.tabbed-sidebar .nav-tabs li a {
  text-decoration: none;
  color: #565656;
  display: block;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.tabbed-sidebar .nav-tabs li a.active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

.tabbed-sidebar .tabs-content {
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabbed-sidebar">
  <div class="tabbed-heading">
    <ul class="nav nav-tabs">
      <li><a class="active" href="#popular" data-toggle="tab">Popular</a></li>
      <li><a href="#video" data-toggle="tab">Video</a></li>
      <li><a href="#topcomments" data-toggle="tab">Top comments</a></li>
    </ul>
  </div>
  <div class="tabs-content">
    <div class="tab-pane fade in active" id="popular">
      sqxq  
    </div>
    <div class="tab-pane fade" id="video">
      ssss
    </div>
    <div class="tab-pane fade" id="topcomments">
      dddd
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

据我所知，这个“选项卡式内容”存在 2 个问题：

1. 与活动标签对应的内容在文档加载时不受欢迎；
2. 非活动标签对应的内容不会逐渐隐藏（淡出）。相反，它的不透明度设置为 0。

我做错了什么？

Answer 1

第一个问题： 与活动标签相对应的内容在文档加载时不感兴趣

来自Boostrap 4 Official Documentation

要使标签淡入，请将 .fade 添加到每个 .tab-pane。第一个选项卡窗格还必须具有 .show 以使初始内容可见。

试试这个

<div class="tab-pane fade show in active" id="popular">

第二期： 非活动标签对应的内容没有逐渐隐藏（淡出）。相反，它的不透明度设置为 0。

在 Bootstrap 中，.fade 过渡时间为 0.15 秒，因此您只需根据自己的意愿进行调整。例如：

CSS：

.fade {
  opacity: 0;
  transition: opacity 1.15s linear;
}

jQuery：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var current = e.target.getAttribute('href');
  var prev = e.relatedTarget.getAttribute('href');
  $(current).show();
  $(prev).hide();
});

这是fiddle