Question

有多个部分。每个部分都有多个选项卡。我想获取第一个标签页高度（.tab-content）并将其高度应用于它在（.tab）中的部分。这需要分别发生在每个部分，因此需要循环。该循环当前似乎不起作用，.tab内容的第一个高度已应用到所有部分。为什么我的循环不起作用？

实时示例：https://staging.123innovation.co.uk/careers/faq

JS

    function tabParentHeight() {

$(".tabs").each(function() {

  var ph = $(this).outerHeight();
  $(this).find('.tab-content:first').css('min-height', 0);
  var ch = $(this).find('.tab-content:first').outerHeight();

  if (ch > ph) {
    $(this).css({
      'height': ch + 'px'
    });
  }
});

}


$(document).ready(function () {


// TABS

// Run Tab Height
tabParentHeight();

$('section a').click(function(event) {
  event.preventDefault();
  $(this).addClass('active');
  $(this).siblings().removeClass('active');

  var ph = $(this).parent().height();
  var ch = $(this).next().height();

  if (ch > ph) {
    $(this).parent().css({
      'height': ch + 'px'
    });
  } else {
    $(this).parent().css({
      'height': 'auto'
    });
  }
});

});


$(window).resize(function() {
  // Run Tab Height
  tabParentHeight();
});

$(document).resize(function() {
  // Run Tab Height
  tabParentHeight();
});

HTML

<section class="tab">

              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative active" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content One</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Two</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Three</h3>
                  <p>Content goes here</p>
              </div>


</section>



<section class="tab list ml2 pl0 tf w-100 h-auto db relative">


              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative active" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content One</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Two</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Three</h3>
                  <p>Content goes here</p>
              </div>


</section>

Answer 1

不确定这些元素是如何生成的，但是由于某种原因，它导致了问题。所有选项卡的内容都具有min-height: 100%属性，并且由于您添加了脚本，所以它们的高度都与第一个高度相同。

无论如何解决该问题，您都可以在CSS的min-height: 100%类中删除tab-content或在脚本中执行以下操作：

$('.tabs').each(function() {
    $(this).find('.tab-content').css('min-height', 0);
    $(this).outerHeight($(this).find('.tab-content').outerHeight());
});

编辑：您可以将tabParentHeight（）函数替换为：

$(".tabs").each(function() {

  var ph = $(this).outerHeight();
  $(this).find('.tab-content:first').css('min-height', 0);
  var ch = $(this).find('.tab-content:first').outerHeight();

  if (ch > ph) {
    $(this).css({
      'height': ch + 'px'
    });
  }
});

遍历div定义父级高度

1 个答案: