Jsf 如何制作PrimeFaces选项卡；可链接的；？

我希望能够链接到PrimeFaces“选项卡视图”中的各个选项卡。换句话说，如果我的页面“test.jsf”有一个名为“Example”的选项卡，那么我希望能够单击指向“test.jsf#Example”的链接，并自动加载“Example”选项卡。我如何做到这一点？

这可以通过少量JavaScript（使用jQuery）来实现。我希望我对以下代码的注释足够好，可以理解

<script type="text/javascript">
//    What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
//    load the tab (by "clicking" on the link) that has the same text value as the fragment.
//    Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
//    This allows individual tabs to be linked to, and puts what tab you were on in the history.
    navigateToTab = function () {
        if (window.location.hash) {
            jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
                if (jQuery(el).text() === window.location.hash.replace('#', '')) {
                    jQuery(el).click();
                    return;
                }
            })
        }
    };

    jQuery().ready(navigateToTab);
    jQuery(window).bind('hashchange', navigateToTab);

//    This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
//    E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
//    to be "#Example"
    setupTabFragmentLinks = function () {
        jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
            el.onclick = function() {window.location = '#' + jQuery(el).text()};
        })
    };
    jQuery().ready(setupTabFragmentLinks);
</script>

//其作用：当页面加载URL片段（即example.com/index.html中的#abc#abc）时，
//加载与片段具有相同文本值的选项卡（通过“单击”链接）。
//示例：如果您转到test.jsf#Example，将单击并加载名为“Example”的选项卡。
//这样就可以链接到各个选项卡，并在历史记录中显示您所在的选项卡。
navigateToTab=函数（）{
if（window.location.hash）{
jQuery（'ul.ui-tabs-nav li a'）。每个（函数（i，el）{
if（jQuery（el）.text（）==window.location.hash.replace（'#'，''）{
jQuery（el）.单击（）；
返回；
}
})
}
};
jQuery（）.ready（导航选项卡）；
jQuery（window）.bind（'hashchange'，navigateTatab）；
//这样，如果您单击一个选项卡，它会将URL片段设置为该选项卡的标题。见上文。
//例如，如果单击名为“示例”的选项卡，则会设置选项卡“a”标记的onclick属性
//成为“榜样”
setupTabFragmentLinks=函数（）{
jQuery（'ul.ui-tabs-nav li a'）。每个（函数（i，el）{
el.onclick=function（）{window.location='#'+jQuery（el.text（）}；
})
};
jQuery（）.ready（setupTabFragmentLinks）；

您所要做的就是在包含选项卡的页面中插入JavaScript。然后，您可以使用常见的

获得指向选项卡的链接。另外一个好处是，您所在的选项卡成为浏览器历史记录的一部分；i、 例如，如果您离开包含选项卡的页面，然后按“后退”按钮，您将返回到您所在的选项卡

---

注意：如果选项卡视图发生更改（例如添加或删除选项卡），则需要再次调用setupTabFragmentLinks。

这可以通过少量JavaScript（使用jQuery）完成。我希望我对以下代码的注释足够好，可以理解

<script type="text/javascript">
//    What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
//    load the tab (by "clicking" on the link) that has the same text value as the fragment.
//    Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
//    This allows individual tabs to be linked to, and puts what tab you were on in the history.
    navigateToTab = function () {
        if (window.location.hash) {
            jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
                if (jQuery(el).text() === window.location.hash.replace('#', '')) {
                    jQuery(el).click();
                    return;
                }
            })
        }
    };

    jQuery().ready(navigateToTab);
    jQuery(window).bind('hashchange', navigateToTab);

//    This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
//    E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
//    to be "#Example"
    setupTabFragmentLinks = function () {
        jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
            el.onclick = function() {window.location = '#' + jQuery(el).text()};
        })
    };
    jQuery().ready(setupTabFragmentLinks);
</script>

//其作用：当页面加载URL片段（即example.com/index.html中的#abc#abc）时，
//加载与片段具有相同文本值的选项卡（通过“单击”链接）。
//示例：如果您转到test.jsf#Example，将单击并加载名为“Example”的选项卡。
//这样就可以链接到各个选项卡，并在历史记录中显示您所在的选项卡。
navigateToTab=函数（）{
if（window.location.hash）{
jQuery（'ul.ui-tabs-nav li a'）。每个（函数（i，el）{
if（jQuery（el）.text（）==window.location.hash.replace（'#'，''）{
jQuery（el）.单击（）；
返回；
}
})
}
};
jQuery（）.ready（导航选项卡）；
jQuery（window）.bind（'hashchange'，navigateTatab）；
//这样，如果您单击一个选项卡，它会将URL片段设置为该选项卡的标题。见上文。
//例如，如果单击名为“示例”的选项卡，则会设置选项卡“a”标记的onclick属性
//成为“榜样”
setupTabFragmentLinks=函数（）{
jQuery（'ul.ui-tabs-nav li a'）。每个（函数（i，el）{
el.onclick=function（）{window.location='#'+jQuery（el.text（）}；
})
};
jQuery（）.ready（setupTabFragmentLinks）；

您所要做的就是在包含选项卡的页面中插入JavaScript。然后，您可以使用常见的

获得指向选项卡的链接。另外一个好处是，您所在的选项卡成为浏览器历史记录的一部分；i、 例如，如果您离开包含选项卡的页面，然后按“后退”按钮，您将返回到您所在的选项卡

---

注意：如果选项卡视图发生更改（例如添加或删除选项卡），则需要再次调用setupTabFragmentLinks。

Primefaces为

（和许多其他组件）提供javascript API。您可以调用客户端

widgetVar

上的

select（index）

方法

。例如，在选项卡视图上

 <p:tabView id="thePanel"  widgetVar="tabPanel"/>

---

Primefaces为

（和许多其他组件）提供了一个javascript API。您可以调用客户端

widgetVar

上的

select（index）

方法

。例如，在选项卡视图上

 <p:tabView id="thePanel"  widgetVar="tabPanel"/>