使用 Primefaces 选项卡视图 (<p:tabView>)，如何从一个选项卡导航到另一个选项卡？
例如：
<p:tabView id="tabPanel">
<p:tab id="tab1">
<p>Tab 1</p>
<a href="#">Go to tab2</a2>
</p:tab>
<p:tab id="tab2">
<p>Tab 2</p>
</p:tab>
</p:tabView>
【问题讨论】：
标签： jsf primefaces tabview
上面@erecan的回答有错别字，动态标签的形式应该是：
function changeTabDynamic(tabId)
{
$('#formId\\:tabPanel ul li a[href="#formId:tabPanel:'+tabId+'"]').click();
}
提供答案而不是明确格式的评论
【讨论】：
您可以通过以下方式更改您的标签视图的标签：
<p:tabView id="tabProyecto" widgetVar="tabPanelWidget" cache="false">
....
在任何按钮中都可以调用jquery函数“changeTabs”
<script type="text/javascript">
$(document).ready(function () {
});
var changeTabs= function (index) {
PF("tabPanelWidget").select(index);
};
...
</script>
【讨论】：
其实你需要放：
function changeTab(index) {
tabPanelWidget.selectTab(index);
}
而不是：
tabPanelWidget.select(index);
【讨论】：
您可以使用 PrimeFaces 的客户端脚本 API。在tabView 中定义widgetVar 属性。然后使用select(index)客户端api。
<p:tabView id="tabPanel" widgetVar="tabPanelWidget">
<p:tab id="tab1">
<p>Tab 1</p>
<a href="#" onclick="changeTab(1);">Go to Tab2</a2>
</p:tab>
<p:tab id="tab2">
<p>Tab 2</p>
</p:tab>
</p:tabView>
注意JS函数的参数。从零开始的 tab 的索引被传递给 Javascript。
这是客户端代码
function changeTab(index)
{
tabPanelWidget.select(index);
}
带有动态内容的tabView
此外，如果您有动态内容，您可以在用户单击选项卡时模拟客户端 API。
我深入研究了组件的源代码。 tabview 组件由 div 和无序列表项组成，其中包括要单击的<a> 标签。然后我从页面中选择<a>标签并点击jquery。
查看我的 jquery 代码：
function changeTab(tabId)
{
$('#formId\\:tabPanel ul li a[href="#form:tabPanel:"+tabId+"]').click();
}
这里是选择器的详细信息。
#formId\:tabPanel : formId 是页面的 ID。如果使用prependId="false"，则可以跳过此部分。 \\ 是 : 的转义，而 tabPanel 是 tabview 的 id。
ul li : 是代表标签的无序列表项。
a[href="#form:tabPanel:"+tabId+"]' : <a> 标签，其href属性等于tabId。
此外，我检查了 PrimeFaces 展示的源代码。您的代码可能存在一些差异。
【讨论】：
tab2 的内容后显示为空。在正常点击它显示罚款。你能说有什么问题吗？
tab2 中，我填充数据表中的记录。所以，我设置了<p:tabView id="tabPanel" widgetVar="tabPanelWidget" dynamic="true">
您可以使用p:tabView 的activeIndex 属性。您必须将其存储在变量中，然后使用操作对其进行修改。
<p:tabView id="tabPanel" activeIndex="#{myBean.activeIndex}">
<p:tab id="tab1">
...
<p:commandLink action="#{myBean.goToTab(2)}">Go to Tab2</p>
</p>
<p:tab id="tab2">
...
</p:tab>
</p:tabView>
我的豆：
public class MyBean {
private int activeIndex;
public void goToTab(int index) {
this.activeIndex = index;
}
}
【讨论】：