CSS Twitter Bootstrap 导航导航标签在点击时不会改变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18262192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap nav nav-tabs don't change on click
提问by chelder
I like how the nav-tabs looks so I want to use it. This is how the web application looks right now:
我喜欢导航标签的外观，所以我想使用它。这是 Web 应用程序现在的样子：
Unfortunately, if I click on other tab (for example "Buscar alojamiento"), the active tab doesn't change. This is my code:
不幸的是，如果我单击其他选项卡（例如“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>
I also try removing class="active". No tab is active ever doing that.
我也尝试删除 class="active"。没有标签是活动的。
回答by Sérgio Michels
Check the "Tabbable Nav" example in the Twitter Bootstrap Components. You must have the correct html to this work. Example:
检查 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>
See the classapplied and the hrefof the links.
请参阅链接的class应用和href链接。
UPDATE
更新
As we have discussed in the comments, we also can change it with Javascript:
正如我们在评论中所讨论的，我们也可以使用 Javascript 更改它：
<script type="text/javascript">
...
document.getElementById("home").setAttribute("class","active")
Or JQuery:
或 JQuery：
$('#home').attr('class','active')
回答by dmahapatro
You would need Tabbable Navto toggle between the contents of each tab.
您需要Tabbable Nav在每个选项卡的内容之间切换。
