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

i how nav-tabs looks want use it. how web application looks right now:

unfortunately, if click on other tab (for example "buscar alojamiento"), active tab doesn't change. 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 try removing class="active". no tab active ever doing that.

check "tabbable nav" example in twitter bootstrap components. must have correct html 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 class applied , href of links.

update

as have discussed in comments, can change javascript:

<script type="text/javascript">     ...     document.getelementbyid("home").setattribute("class","active") 

or jquery:

$('#home').attr('class','active')