引导 - 将最大高度应用于 div 在引导选项卡上不起作用

Question

嗨，我编写了用于计算容器最大高度的代码，并将该高度应用于小于最大高度的容器。在这种情况下，我使用了引导选项卡。我编写的代码在活动的第一个选项卡上工作正常。但是，如果我们单击其他选项卡，则它不起作用。我也想将高度应用于其他选项卡的容器。请帮助我。

$('.container-height').each(function() {
  var highestBox = 0;
  $('.column', this).each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }
  });
  $('.column', this).height(highestBox);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="row mrgn-top-30">
  <div class="col-sm-12">
    <div class="atoz-tabs">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#a">A</a></li>
        <li><a data-toggle="tab" href="#b">B</a></li>
        <li><a data-toggle="tab" href="#c">C</a></li>
      </ul>
      <div class="tab-content">
        <div id="a" class="tab-pane fade in active">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered on one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paper</p>
              </div>
            </div>
          </div>
        </div>
        <div id="b" class="tab-pane fade">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered c</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paperon one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
          </div>
        </div>
        <div id="c" class="tab-pane fade">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered c</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paperon one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

这是因为如果尚未显示元素的高度，jquery 将无法正确计算元素的高度。

因此，您可以将代码包装在一个函数中，并在单击新选项卡时调用它，如下所示

function setSameColumnHeight(){
    var activeTab = $('.tab-pane.active');
    var highestBox = 0;
    $('.column', activeTab).each(function() {
      if ($(this).height() > highestBox) {
        highestBox = $(this).height();
      }
    }); 
  $('.column', activeTab).height(highestBox);
} 
setSameColumnHeight();
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  setSameColumnHeight();
});

在这里演示