CSSクラス 'アクティブ'は読み込みページでは機能しません

Question

ナビゲーションタブを作成してもうまく動作しますが、ページにすべてのdivが表示されます。 いずれかのタブをクリックすると、正常に動作します。

<ul class="nav nav-tabs"> 
         <li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li> 
         <li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li> 
         <li><a data-toggle="tab" href="#login">Login Cliente</a></li> 
        </ul> 

        <div class="tab-content"> 
         <div id="dados" class="tab-pane fade in active"> 
         <div class="form-group"> 
           <label>Nome</label> 
           <h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" /> 
          </div> 
         </div> 
         <div id="endereco" class="tab-pane fade in active"> 
         </div> 
         <div id="login" class="tab-pane fade in active"> 
          <div class="form-group"> 
           <label>Email</label> 
           <h:inputText value="#{usuarioMB.usuario.email}" 
            styleClass="form-control" /> 
          </div> 
          <div class="form-group"> 
           <label>Senha</label> 
           <h:inputSecret styleClass="form-control" 
            value="#{usuarioMB.usuario.senha}" /> 
          </div> 
         </div> 

        </div> 

は、私はすでにパラメータ

criarusuario.xhtml?#dados 

としてページ通過#dadosを呼び出すために試みたが、それはすべてあなたのタブのdivは、クラスtab-pane fade in activeを持っているためだあまりに

Answer 1

を動作しません。

アクティブな状態（tab-pane fade in activeクラス）のdivが1つあり、その他のdivはtab-pane fadeクラスのみである必要があります。

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li> 
    <li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li> 
    <li><a data-toggle="tab" href="#login">Login Cliente</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="dados" class="tab-pane fade in active"> 
    <div class="form-group"> 
     <label>Nome</label> 
     <h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" /> 
    </div> 
    </div> 
    <div id="endereco" class="tab-pane fade"> 
    </div> 
    <div id="login" class="tab-pane fade"> 
    <div class="form-group"> 
     <label>Email</label> 
     <h:inputText value="#{usuarioMB.usuario.email}" styleClass="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label>Senha</label> 
     <h:inputSecret styleClass="form-control" value="#{usuarioMB.usuario.senha}" /> 
    </div> 
    </div> 
</div>