时间戳

首页 > 解决方案 > 如何修复这个使用绝对位置的选项卡布局？

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

问题描述

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

下面的内容与使用绝对位置的选项卡重叠。我正在使用绝对位置，以便动画工作。是否有可能添加 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;
}

标签： javascriptjquerycsstwitter-bootstrapbootstrap-4

解决方案

您不想要min-height，因为您不知道每个响应级别的高度（在移动设备上可能会更低）。您想要的是让.active选项卡设置选项卡的高度。为此，您需要将其position重新设置为static.

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

这也需要您将 a 添加top: 0到其他的。没有它，当前活动选项卡之后的选项卡将不会位于选项卡容器的顶部，而是位于活动选项卡的底部。

您更新的小提琴：https ://jsfiddle.net/websiter/grkn493p/

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

设置过渡：

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

Get the active tab's height when the tab changes and set it on the container:

$(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)

    })
  });
});

更新小提琴：https ://jsfiddle.net/websiter/uz0fkrj2/

请注意更新的小提琴更进一步。我注意到调整页面大小时容器上的设置高度没有更新。这带来了两个明显的问题：

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

推荐阅读