jQuery UI选项卡激活事件无法正常运行

Question

我有一个div，每个标签包含一个表。 内容将被动态地加载到每个表中，因此我需要一种方法来平均设置每个表的th和tr元素的高度。 例如，如果table1的高度为50px，table2的高度将为50px。

我使用的代码有效，但是由于某种原因，它在每个选项卡开关上的每个元素的高度增加了一个像素。 例如，如果我单击第二个选项卡，则所有tr元素均为50px。 如果单击第一个选项卡，然后返回第二个选项卡，则tr元素将更改为51px高。 如果我单击返回第一个选项卡，然后单击第二个选项卡，则tr元素将更改为52px高等。

这是我的代码：

$( "#new-locations-tabs" ).tabs({
  activate: function(events, ui) {
    var getHeadingHeight = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css("height");
    $("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", getHeadingHeight);

    var getRowHeight = $("#new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height");
    $("#new-locations-tabs .ui-tabs-panel:visible .right-table td, #new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height", getRowHeight);
  }
});

http://jsfiddle.net/KFcYS/

Answer 1

“请注意，元素的计算样式可能与样式表中为该元素指定的值不同。”

http://api.jquery.com/css

可能发生了一些四舍五入的计算。 尝试改用height()或outerHeight() 。

“ .css（“ height”）和.height（）之间的区别在于，后者返回无单位像素值（例如400），而前者返回完整单位的值（例如400px）。当需要在数学计算中使用元素的高度时，建议使用.height（）方法。”

http://api.jquery.com/height