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

Posted 2023-05-08

【中文标题】Bootstrap 4选项卡式内容不起作用

【英文标题】：Bootstrap 4 tabbed content not working

【发布时间】：2018-07-13 23:09:22

【问题描述】：

我正在尝试使用 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 个问题：

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

我做错了什么？

【参考方案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

【讨论】：

@RazvanZamfir 淡入淡出效果很好，但如果你想增加过渡时间，我添加了一个例子

我想然后慢慢消失 (style="display: none")，不将不透明度降低到 0。

display 是一个离散属性，不适用于 CSS 过渡或动画

我有 jQuery 替代品吗，可以在这种情况下使用？

你的小提琴和我的有同样的问题。