Xpage with Bootstrap panels:如何在打开xpage时设置活动标签？

Question

我希望控制在打开Xpages时哪个选项卡处于活动状态(这将取决于文档在工作流中的位置)。

下面我有两个bootstrap选项卡，当页面加载时，这两个选项卡都不是活动的或显示的。但是，输出脚本应该为我做这件事吗？它似乎什么也做不了。怎么啦？

 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:script src="/jQueryXSnippet.js" clientSide="true"></xp:script>
    </xp:this.resources>
    <xp:div styleClass="row">
        <xp:div styleClass="col-sm-12">
            <ul class="nav nav-tabs" id="list1">
                <li role="presentation" class="tab">
                    <a data-target="#inventory" data-toggle="tab">
                        Inventory
                    </a>
                </li>
                <li role="presentation">
                    <a data-target="#beingBuilt" data-toggle="tab">
                        Being Built
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade" id="inventory">
                    <xp:panel>
                        <xp:div styleClass="row"
                            style="height:20.00px">
                        </xp:div>
                        <div class="well well-sm">
                            <div class="form-group">DATA</div>
                        </div>
                    </xp:panel>
                </div>
                <div class="tab-pane fade" id="beingBuilt">
                    <xp:panel>
                        <xp:div styleClass="row"
                            style="height:20.00px">
                        </xp:div>
                        <div class="well well-sm">
                            <div class="form-group">DATA</div>
                        </div>
                    </xp:panel>
                </div>
            </div>
        </xp:div>
    </xp:div>
    <xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[$(document).ready(function()
{       
     x$("#{id:beingBuilt}").tab("show");    
}
)]]></xp:this.value>
    </xp:scriptBlock>
</xp:view>

Answer 1

将CSJS代码更改为

   <xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[$(document).ready(function() {      
            $("[data-target='#beingBuilt'").tab("show");    
        })]]></xp:this.value>
    </xp:scriptBlock>

id为"beingBuilt“的div被呈现到

​

​

这就是为什么必须搜索具有data-target="#beingBuilt"属性的元素的原因。您可以通过以下方式使用纯jQuery完成此操作：

$("[data-target='#beingBuilt'")