0

我对引导程序 3 有问题。

文档说：使用“tab-pane fade”类来淡化选项卡之间的过渡。所以我的代码看起来像这样：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

并且淡入淡出效果很好。但问题是内容取决于它的大小会产生明显的跳跃效果。

我知道引导程序有一个“折叠”类，手风琴已将其用于手风琴内容的展开/折叠动画。

问题是我想保存选项卡内容之间的淡入淡出过渡，并在我在选项卡之间切换时使选项卡的内容扩展和折叠。

目前的实现在 protasov.by/service 在这个页面上有 4 个导航药丸，它们在切换之间淡入淡出，这些标签里面有表格，我的想法是让标签内容在大小之间折叠/展开动画然后淡入显示拉伸的内容。

如何向该选项卡添加“折叠”显示/隐藏行为？

提前致谢！

4

0 回答 0