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脚本动态生成的数值。

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

Answer 1

我没有将标签与ajax内容结合使用，而是将您的示例与http://jqueryui.com/tabs/#ajax上的演示示例进行比较，我看到了以下几点：

您有$('#tabs').tabs({ cache:true,但我不认为这是tabs api

的一部分

看起来你也是通过ajax加载第一个标签？这是问题的一部分吗？当您最初加载页面并单击选项卡时，firebug或IE开发人员工具会告诉您有什么问题吗？

在回复下面的评论时......我使用以下内容：

$(document).ready(function() {    
    var setTab = $("#setTab").val();
    $("#iTABs").tabs("select", setTab);
})

与此相结合（在页面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>
        <!-- Repeat for each tab you need -->
    </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内容。那里没有花哨的阿贾克斯......

此外，（不是问题的一部分，但只是一般）你使用：

var tab_index = $('#tab_index').attr('value');

你可以使用：

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

在单击选项卡两次之前，JQuery UI选项卡将不起作用

1 个答案: