JQuery UI选项卡不工作，直到一个选项卡被点击两次 - JQuery UI tab won't work until a tab is clicked twice

JQuery UI tab won't work until a tab is clicked twice

我使用jQuery ui选项卡，脚本如下:

$(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);
});

<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脚本根据不同场景动态生成的数值。

奇怪的是，当页面加载时，我需要在选择选项卡之前单击两次，但在此之后它会正常工作，直到页面刷新并返回问题。任何关于如何解决这个问题的想法都会非常感激。很多谢谢!

我没有将制表符与ajax内容结合使用，但将您的示例与http://jqueryui.com/tabs/#ajax的演示示例进行比较，我看到了一些事情:

你有$('#tabs').tabs({ cache:true,但是我不认为它是标签api
的一部分
看起来你是通过ajax加载第一个选项卡?这是问题的一部分吗?当您最初加载页面并单击选项卡时，firebug或IE开发人员工具会告诉您有什么问题吗?
回应你下面的评论…我使用以下语句:

$(document).ready(function() { var setTab = $("#setTab").val(); $("#iTABs").tabs("select", setTab); })
与this (on page tabs.php)结合:

<div id="iTABs"> <ul> <li><a tabindex="-1" href="#tabs-1">Tab Title</a></li> <li><a tabindex="-1" href="#tabs-2">Tab 2 Title</a></li>  </ul> </div> <div id="tabs-1">Fancy tab content</div> <div id="tabs-2">Fancy tab 2 content</div> <input type="hidden" id="setTab" value="<?php echo $_GET['sTab']; //2 ?>">
当用户进入tabs.php?sTab=2时，标签条打开到标签2，标签2的内容显示出来。没有花哨的ajax…

另外，(不是问题的一部分，只是一般)你可以使用:

var tab_index = $('#tab_index').attr('value');
你可以直接用:

var tab_index = $('#tab_index').val();