jQuery 个标签内的相同高度 li

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

Same height li within jQuery Tabs

css

jquery

jquery-ui-tabs