Xpage with Bootstrapパネル：xpageを開いたときにアクティブなタブを設定する方法は？

Question

Xpagesを開いたときにどのタブがアクティブになっているかを制御したいです（ドキュメントがワークフローのどこにあるかによって異なります）。

以下私は2つのブートストラップタブを持っていますが、どちらもページがロードされてもアクティブではありません。しかし、出力スクリプトは私のためにそれを行う必要がありますか？それは何もしないようです。なにが問題ですか？

<?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'")