[英]CSS class 'active' doesn't work on load page
I create a nav-tabs and works well, however on the page load all div appear. 我创建了一个nav-tabs并且运行良好,但是在页面上加载所有div都会出现。 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 我已经尝试调用传递
#dados
作为参数的页面
criarusuario.xhtml?#dados
but it doesn't work too 但它也不起作用
That's because all your tab divs have classes tab-pane fade in active
. 那是因为所有的tab div都有类别
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. 你应该有一个具有活动状态的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.