3

我喜欢导航选项卡的外观，所以我想使用它。这是 Web 应用程序现在的样子：

nav 导航标签截图

不幸的是，如果我单击其他选项卡（例如“Buscar alojamiento”），活动选项卡不会更改。这是我的代码：

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

我也尝试删除 class="active"。没有任何选项卡处于活动状态。

4

2 回答 2

11

检查 Twitter Bootstrap 组件中的“Tabbable Nav”示例。您必须拥有正确的 html 才能完成这项工作。例子：

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

请参阅class应用和href链接。

更新

正如我们在评论中所讨论的，我们也可以用 Javascript 来改变它：

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

或 JQuery：

$('#home').attr('class','active')
于 2013-08-15T21:49:03.157 回答
3

您需要Tabbable Nav在每个选项卡的内容之间切换。

于 2013-08-15T21:46:24.830 回答