Twitter Bootstrap nav nav-tabs don't change on click

css, grails, nav, twitter-bootstrap

Solution

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')

Problem

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.

Original source