1

在 jquery-ui 1.10.3 中，url 方法已被替换为 aria-control 方法。

我不知道如何使用它。

我正在尝试从名为 action.php 的文件中加载数据

action.php 文件发送消息“来自服务器的内容”

我需要将它放在三个选项卡中的第一个。

这没用。我在 chrome 控制台上显示以下消息

未捕获的错误：选项卡小部件实例没有此类方法“aria-controls”

我有以下代码。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tab1">Tab 1</a></li>
            <li class="ui-state-default ui-corner-top"><a href="#tab2">Tab 2</a></li>
            <li class="ui-state-default ui-corner-top"><a href="#tab3">Tab 3</a></li>
        </ul>
        <div id="tab1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Contents of first tab.</div>
        <div id="tab2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Contents of the second tab</div>
        <div id="tab3" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Contents of the third tab</div> 
    </div>


    <script type="text/javascript">
        (function($) {
            $("#tabs").tabs()
                .tabs("aria-controls", 0, "action.php")
                .tabs("load", 0);
        })(jQuery);
    </script>
4

1 回答 1

1

我已经尝试了 4-5 个小时来为我自己的项目解决这个问题。我终于找到了一个可行的解决方案，但我认为这不是开发人员的意图：

    $("#tabs ul li a").each(function(index){
        switch(index){
            case 0:
                url = "pageone.php?q="+parameter
                break
            case 1:
                url = "pagetwo.php?q="+parameter
                break
            case 2:
                url = "pagethree.php?q="+parameter
                break
        }        
        $(this).attr('href',url)
    })

我看过一些帖子，其中指出应该将 aria-controls 属性更改为所需的 url。我也尝试过，但似乎 tabs 函数在选项卡之间导航时引用了 aria-controls，因此更改它只会给我一个“不匹配的片段标识符”错误。

更新：由于 OP 不需要以编程方式使用参数或更改 url 的能力，这对于 HTML 来说就足够了：

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" aria-controls="tab1"><a href="action.php">Tab 1</a></li>
        <li class="ui-state-default ui-corner-top" aria-controls="tab2"><a href="action.php">Tab 2</a></li>
        <li class="ui-state-default ui-corner-top" aria-controls="tab3"><a href="action.php">Tab 3</a></li>
    </ul>
    <div id="tab1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="tab2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="tab3" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div> 
</div>

然后当然是标签的明显初始化：

$("#tabs").tabs()
于 2013-05-13T11:22:57.190 回答