CSS class 'active' doesn't work on load page

Question

I create a nav-tabs and works well, however on the page load all div appear. When I click in any tab it works as it should.

<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>

I've already tried to call the page passing #dados as parameter

criarusuario.xhtml?#dados

but it doesn't work too

Answer 1

That's because all your tab divs have classes tab-pane fade in active .

You should have one div with active state ( tab-pane fade in active classes) and other divs should have only tab-pane fade classes.

<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>