jquery,通过外部超链接访问页面选项卡“with ajax content”?

时间:2011-09-30 00:27:02

标签: jquery-ui jquery hyperlink jquery-ui-tabs

我无法打开显示特定jquery选项卡的页面,该选项卡通过ajax加载其内容。

问题是jquery-ui使用锚标签打开外部链接调用的选项卡,但是ajax内容选项卡锚没有一个。

任何想法

提前致谢。

在jquery-ui演示中基本相同的代码 我想要的是在我的主页上有一个链接,它将打开已经显示tabX的其他页面

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs({
            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. " +
                                "If this wouldn't be a demo." );
                        }
            }
        });
    });
});



<div id="tabs">
    <ul>
        <li class="tab first_tab"><a id="tab1" href="tab1.html">dit doen we</a></li>
        <li class="tab"><a id="tab2" href="tab2.html">disciplines</a></li>
        <li class="tab"><a id="tab3" href="tab3.html">cases</a></li>
        <li class="tab"><a id="tab4" href="tab4.html">uitgelicht</a></li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:1)

要选择标签,您可以使用select上的.tabs()方法,例如$('#tabs').tabs('select', 1)将选择第二个标签(标签索引为1)。

要打开一个页面并告诉它选择一个标签,你需要以某种方式“传递意图”。如果您使用AJAX进行页面转换,则只需加载页面并调用.tabs('select', tabIndex)即可。

如果您在没有AJAX的情况下加载第二页,则可以使用查询字符串传入变量,例如?loadTab=1并在正在加载的页面中解析它。 location.search将为您提供查询字符串。 This question将帮助您解析它。

所以,在第2页,你会有这样的事情:

$(function() {
    $("#tabs").tabs({
        ...
    });

    // code to parse the loadTab variable in the querystring

    if (typeof(loadTab) !== 'undefined' && parseInt(loadTab) !== 'NaN')
        $('#tabs').tabs('select', parseInt(loadTab));
}