Question

在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>

Answer 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。我也试过了，但是当在标签之间导航时，标签功能似乎引用了aria-controls，因此更改它只会给我一个“不匹配的片段标识符”错误。

更新：由于OP不需要能够以编程方式使用参数或更改网址，因此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()

jquery ui ajax tab使用aria-control而不是url

1 个答案: