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