I like how the nav-tabs looks so I want to use it. This is how the web application looks right now:
Unfortunately, if I click on other tab (for example "Buscar alojamiento"), the active tab doesn't change. This is my code:
<ul class="nav nav-tabs">
<li>
<g:link controller="usuario" action="show">
<g:message code="nav.usuario.show" default="Datos del usuario" />
</g:link>
</li>
<li class="active">
<a href="${createLink(uri: '/')}">
<g:message code="nav.home" default="Página de inicio" />
</a>
</li>
<li>
<g:link controller="alojamiento" action="show">
<g:message code="nav.alojamiento.show" default="Buscar alojamiento" />
</g:link>
</li>
</ul>
I also try removing class="active". No tab is active ever doing that.
Check the "Tabbable Nav" example in the Twitter Bootstrap Components. You must have the correct html to this work. Example:
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">Home</a>
</li>
<li><a href="#other" data-toggle="tab">Other</a></li>
<li><a href="#">...</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active">
<p>Home</p>
</div>
<div id="other" class="tab-pane">
<p>Other</p>
</div>
</div>
See the class
applied and the href
of the links.
UPDATE
As we have discussed in the comments, we also can change it with Javascript:
<script type="text/javascript">
...
document.getElementById("home").setAttribute("class","active")
Or JQuery:
$('#home').attr('class','active')