Question

我已经从昨天开始清理这个问题，希望问题能够得到解决。下面是一个简单的JS，找到最高的li，然后使所有li的高度。将ul放在jQuery选项卡中时会出现问题，并且当页面加载到第一个选项卡下时，将显示所有选项卡信息。单击选项卡（任何选项卡）后，所有内容都会自行解析并按预期显示。为什么会这样？我该如何解决这个问题？

jsfiddle应该清楚问题是什么。

jsfiddle

$(document).ready(function() {

var maxHeight = 0;

$('ul#list li').each(function() {
 maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);


$('.tabs .tab-links a').on('click', function(e)  {
  var currentAttrValue = $(this).attr('href');

  // Show/Hide Tabs
  $('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

  // Change/remove current tab to active
  $(this).parent('li').addClass('active').siblings().removeClass('active');


  e.preventDefault();
  });
});

Answer 1

您只需在列表高度设置行后添加$('.tab').hide();$('.tab.active').show();并离开

.tab.active {display:block;left: 0px;}

请参阅jsfiddle

Answer 2

在阅读您的问题时，我的印象是您希望将所有内容div保持为相同的大小，而不仅仅是可点击的标签。

我更改了这个代码段：

$('ul#list li').each(function() {
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

要：

$('div.tab-content div.tab').each(function() {
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

如果是这样的话： https://jsfiddle.net/x50zL2to/59/

jQuery选项卡中的相同高度li

2 个答案: