Nav-пилюли не работают должным образом в заголовке панели

Question

Я добавил навигационную таблетку к заголовку панели и не работает должным образом. Событие onclick срабатывает корректно и корректно переключает отображаемую панель, но выбранная вкладка не выделена. Если я перемещаю контейнер-жидкость из стороны, заголовок панели, он выбирает вкладку при нажатии. Мне нравится эффект, который я получаю, используя панель начальной загрузки и заголовок панели, но было бы неплохо, если бы вкладку можно было выбрать при нажатии.

любые идеи ???

<xp:panel id="panelMain"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-md-10 col-sm-4"> 
          <ul class="nav nav-pills"> 
           <li role="presentation"> 
            <xp:link id="header" text="Header"> 
             <xp:this.attrs> 
              <xp:attr name="data-toggle" value="tab"> 
              </xp:attr> 
             </xp:this.attrs> 
             <xp:eventHandler event="onclick" submit="true" 
              refreshMode="partial" refreshId="panelMain"> 
              <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "Header"}]]></xp:this.action> 
             </xp:eventHandler> 
            </xp:link> 
           </li><!-- li role= --> 
           <li role="presentation"> 
            <xp:link id="history" text="History"> 
             <xp:this.attrs> 
              <xp:attr name="data-toggle" value="tab"> 
              </xp:attr> 
             </xp:this.attrs> 
             <xp:eventHandler event="onclick" submit="true" 
              refreshMode="partial" refreshId="panelMain"> 
              <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "History"}]]></xp:this.action> 
             </xp:eventHandler> 
            </xp:link> 
           </li><!-- li role= --> 
          </ul><!-- class nav --> 
         </div><!-- col --> 
        </div><!-- main row --> 
       </div><!-- container-fluid --> 
     </div><!-- panel-heading --> 
     <div class="panel-body"> 
      <xp:panel id="panelHeader"> 
      Header Panel 
       <xp:this.style><![CDATA[#{javascript:if (!viewScope.containsKey("vsShowPanel")){ 
    viewScope.vsShowPanel = "Header"; 
} 
var showPanel:String = viewScope.vsShowPanel; 
(showPanel == "Header") ? "" : "display:none"}]]></xp:this.style> 
      </xp:panel> <!-- panelHeader --> 
      <xp:panel id="panelHistory"> 
       History panel 
       <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "History") ? "" : "display:none"}]]></xp:this.style> 
      </xp:panel><!-- panelHistory --> 
     </div><!-- panel-body --> 
    </div><!-- class=panel --> 
</xp:panel><!-- panelMain --> 

Answer 1

Если вы обновите панель/div, содержащую Nav, то highlite на таблетке будет потерян. В приведенном ниже коде я переместил nav из заголовка панели, а high lite работает, как ожидалось. Не совсем то, что я хотел, но он работает. Мне нужно помнить «не обновлять на Nav»

<xp:panel id="panelNav"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-10 col-sm-4"> 
       <ul class="nav nav-pills"> 
        <li role="presentation"> 
         <xp:link id="header" text="Header"> 
          <xp:this.attrs> 
           <xp:attr name="data-toggle" value="tab"> 
           </xp:attr> 
          </xp:this.attrs> 
          <xp:eventHandler event="onclick" submit="true" 
           refreshMode="partial" refreshId="panelMain"> 
           <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "Header"}]]></xp:this.action> 
          </xp:eventHandler> 
         </xp:link> 
        </li><!-- li role= --> 
        <li role="presentation"> 
         <xp:link id="history" text="History"> 
          <xp:this.attrs> 
           <xp:attr name="data-toggle" value="tab"> 
           </xp:attr> 
          </xp:this.attrs> 
          <xp:eventHandler event="onclick" submit="true" 
           refreshMode="partial" refreshId="panelMain"> 
           <xp:this.action><![CDATA[#{javascript:viewScope.vsShowPanel = "History"}]]></xp:this.action> 
          </xp:eventHandler> 
         </xp:link> 
        </li><!-- li role= --> 
       </ul><!-- class nav --> 
      </div><!-- col --> 
     </div><!-- main row --> 
    </div><!-- container-fluid --> 
</xp:panel> 
<xp:panel id="panelMain"> 
    <div class="panel panel-default"> 

     <div class="panel-body"> 
      <xp:panel id="panelHeader"> 
       Header Panel 
       <xp:this.style><![CDATA[#{javascript:if (!viewScope.containsKey("vsShowPanel")){ 
    viewScope.vsShowPanel = "Header"; 
} 
var showPanel:String = viewScope.vsShowPanel; 
(showPanel == "Header") ? "" : "display:none"}]]></xp:this.style> 
      </xp:panel> <!-- panelHeader --> 
      <xp:panel id="panelHistory"> 
       History panel 
       <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "History") ? "" : "display:none"}]]></xp:this.style> 
      </xp:panel><!-- panelHistory --> 
     </div><!-- panel-body --> 
    </div><!-- class=panel --> 
</xp:panel><!-- panelMain -->