javascript - 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

"Note that the computed style of an element may not be the same as the value specified for that element in a style sheet."

http://api.jquery.com/css

可能发生了一些计算舍入。尝试使用height()或outerHeight()相反。

"The difference between .css( "height" ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation."

http://api.jquery.com/height