[英]CSS class 'active' doesn't work on load page
我创建了一个nav-tabs并且运行良好,但是在页面上加载所有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
但它也不起作用
那是因为所有的tab div都有类别tab-pane fade in active
。
你应该有一个具有活动状态的div( tab-pane fade in active
类中的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.