0

我正在使用带有以下脚本的 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_indexPHP脚本根据不同场景动态生成的数值在哪里。

奇怪的是，在页面加载的时候，我需要在一个选项卡上点击两次才能被选中，但是之后就可以正常工作了，直到页面被刷新，问题又回来了。任何有关如何解决此问题的想法将不胜感激。非常感谢！

4

1 回答 1

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 内容时。那里没有花哨的ajax东西......

此外，（不是问题的一部分，而是一般而言）您使用：

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

你可以只使用：

var tab_index = $('#tab_index').val();
于 2013-05-03T16:45:10.253 回答