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

时间:2013-05-03 15:39:23

标签: php javascript jquery jquery-ui

我正在使用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脚本动态生成的数值。

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

1 个答案:

答案 0 :(得分:0)

我没有将标签与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();