CSS class 'active' 在加载页面上不起作用

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>

我已经尝试调用传递 #dados 作为参数的页面

criarusuario.xhtml?#dados

但是也行不通

Answer 1

那是因为你所有的标签 div 都有类 tab-pane fade in active.

你应该有一个 div 处于活动状态 (tab-pane fade in active 类) 而其他 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>

CSS class 'active' 在加载页面上不起作用

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

html

frontend

twitter-bootstrap