php - タブを 2 回クリックするまで JQuery UI タブが機能しない

Question

以下のスクリプトで jQuery ui タブを使用しています。

JS

$(document).ready(function() {
    var tab_index = $('#tab_index').attr('value');
    $('#tabs').tabs({ cache:true,
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
            }
        },
    });
    $('#tabs').tabs('option', 'active', tab_index);
});

HTML

<input id="tab_index" type="hidden" value="<?php echo $tab_index; ?>" />

<div id = "tabs">
<ul>
    <li><a href="tabs/current_portfolio.php">Current Portfolio</a></li>
    <li><a href="tabs/realised_gain_loss.php">Realised Gain / Loss</a></li>
    <li class = "tab_trade_list"><a href="tabs/add_trades.php">Add Trades</a></li>
    <li><a href="tabs/test.php">Test</a></li>
</ul>
</div>

$tab_indexは、さまざまなシナリオに基づいて PHP スクリプトから動的に生成される数値です。

奇妙なことに、ページが読み込まれると、タブを選択する前にタブを 2 回クリックする必要がありますが、その後、ページが更新されて問題が再発するまでは正常に機能します。これを解決する方法についてのアイデアは大歓迎です。どうもありがとう！