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

【问题标题】：jQuery UI tabs activate event not functioning correctlyjQuery UI 选项卡激活事件无法正常运行
【发布时间】：2014-03-04 15:07:53
【问题描述】：

我有一个带有不同选项卡的 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/

【问题讨论】：

做个小提琴什么的……没人会以那种形式回答你的问题。
这真的很奇怪。不知道为什么它不能正确读取 css 值...

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案1】：

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

http://api.jquery.com/css

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

" .css( "height" ) 和 .height() 的区别在于后者返回一个无单位的像素值（例如，400），而前者返回一个没有单位的值（例如，400px )。当需要在数学计算中使用元素的高度时，建议使用 .height() 方法。"

http://api.jquery.com/height

【讨论】：