javascript - 如何修复使用绝对位置的选项卡布局？

Question

我知道绝对位置是如何工作的，但在这种情况下，它会破坏布局。当然，我可以使用媒体查询为每个屏幕尺寸使用 min-height，但这不是一个完全可靠的解决方案，因为客户端可以上传任何尺寸的图像。

下面的内容与使用绝对位置的选项卡重叠。我正在使用 absolute-position 以便动画工作。是否有可能添加一个 jQuery 代码来检测图像高度并自动应用它或者是否有更好的解决方案？我该如何解决这个问题？

JSFiddle: https://jsfiddle.net/6yo5b198/

HTML:

<div class="modules">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-12">
        <div id="exTab1">
          <div class="row">
            <div class="col-md-3 col-12">
              <ul class="nav nav-pills">
                <li class="active">
                  <a class="nav-link active" href="#a1a" data-toggle="tab">Overview</a>
                </li>
                <li><a class="nav-link " href="#a2a" data-toggle="tab">About Us</a>
                </li>
                <li><a class="nav-link " href="#a3a" data-toggle="tab">Services</a>
                </li>
              </ul>
            </div>
            <div class="col-md-9 col-12">
              <div class="tab-content clearfix">
                <div class="tab-pane active" id="a1a">
                  <img src="https://i.postimg.cc/xjFVtP8v/1511048-810098669070876-8091817687576561426-n.jpg">
                </div>
                <div class="tab-pane" id="a2a">
                  <img src="https://i.postimg.cc/d3XM3JpH/198582c8c440a3a96817d79a6dc28731-640x469.jpg">
                </div>
                <div class="tab-pane" id="a3a">
                  <img src="https://i.postimg.cc/qMhVYC69/50445941-10213980102716788-1077889899119509504-n.jpg">
                </div>
              </div>
            </div>
          </div>
        </div>
            </div>
        </div>
    </div>
</div>
<div class="">
  <h1>Other web contents go here.</h1>
</div>

CSS:

.tab-content .tab-pane img {
  opacity: 0;
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  max-width: 100%;
  height: auto;
}
.tab-content .active img {
  opacity: 1;
  transform: translate(0);
}
#exTab1 .tab-content {
  overflow: hidden;
}
#exTab1 .tab-content .tab-pane {
  display: block;
  position: absolute;
  overflow: hidden;
}

Answer 1

您不需要 min-height，因为您不知道每个响应级别的高度(在移动设备上它可能更低)。您想要的是 .active 选项卡设置选项卡的高度。为此，您需要通过将其 position 设置回 static 将其包含在文档流中。

#exTab1 .tab-content .tab-pane.active {
  position: static;
}

这还需要你给其他的添加一个top: 0。如果没有它，当前事件标签之后的标签将不会位于标签容器的顶部，而是位于事件标签容器的底部。

您更新的 fiddle :https://jsfiddle.net/websiter/grkn493p/

---

注意:如果您还希望容器高度的变化平滑，则必须在容器上使用 height 并在每次选项卡更改时转换它，通过从当前选项卡的高度读取它。

设置过渡:

#exTab1 .tab-content {
  transition: height .3s cubic-bezier(.4,0,.2,1);
}

在标签改变时获取事件标签的高度并设置在容器上:

$(function() {
// on document ready...

  $('.nav').on('shown.bs.tab', function(e){
  // on every `shown.bs.tab` triggered on a `.nav`, run this code:

    const $target = $($(e.target).attr('href'));
    //find target from `href` tab attribute

    $target.is('div') && $target.closest('.tab-content').css({
    // if target is div, set it's css to

      height: $target.height()
      // the height of target (defined above)

    })
  });
});

更新 fiddle :https://jsfiddle.net/websiter/uz0fkrj2/

请注意更新后的 fiddle 更进了一步。我注意到调整页面大小时，容器上的设置高度不会更新。这带来了两个截然不同的问题:

• a) 更新高度的函数需要更改为目标不可知(因为我们不知道 resize 事件中的目标)。但这很容易修复，因为目标是当前的 .active 选项卡面板。
• b) window.resize 过于频繁地被触发，并且如此频繁地设置页面中每个选项卡容器的高度会导致性能问题(页面动画会错开)。为避免这种情况，我节流-ed 更新函数(不允许它运行的频率超过x 毫秒)。我导入了 lodash 并使用了它的 _.throttle 方法 - 有一个 jQuery 等效方法，但我不确定它的语法 - 从未使用过它。