Блог

Существует несколько разделов. В каждом разделе есть несколько вкладок. Я хочу получить высоту первой вкладки (.tab-content) и применить ее высоту к разделу, в котором она находится (.tab). Это должно происходить с каждым разделом по отдельности — отсюда и цикл. Цикл, похоже, в настоящее время не задействован, и самая первая высота в .tab-content применяется ко всем разделам. Почему мой цикл не работает?

Живой пример: 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>
 

Не уверен, как именно генерируются эти элементы, но по какой-то причине это вызывает проблему. все содержимое вкладки имеет min-height: 100% атрибут, и с тех пор, как вы добавили свой скрипт, все они имеют ту же высоту, что и первый.

В любом случае, чтобы устранить проблему, вы можете удалить min-height: 100% tab-content класс in в своем css или сделать что-то подобное в своем скрипте:

 $('.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'
    });
  }
});