CSS 类“活动”在加载页面上不起作用答案

【问题标题】：CSS class 'active' doesn't work on load pageCSS 类“活动”在加载页面上不起作用
【发布时间】：2017-05-16 23:45:34
【问题描述】：

我创建了一个导航选项卡并且效果很好，但是在页面加载时会出现所有 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

但它也不起作用

【问题讨论】：

标签： html twitter-bootstrap frontend

【解决方案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>

【讨论】：