twitter-bootstrap - Bootstrap 选项卡功能作为外部链接

Question

我正在进行一些 Boostrap 选项卡操作。它有 3 个选项卡，可在同一页面中加载内容。这一切都很完美!

但是，在第 4 个选项卡上，我有一个要在新窗口中打开的链接。也许我不应该为最后一个元素使用选项卡功能，但它在页面和移动设备上看起来最好用这种方式使用它。有什么方法可以使用 Bootstrap 选项卡链接到外部链接吗？

<ul class="nav nav-tabs push" data-toggle="tabs">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li class="view_on_site"><a href="http://www.yahoo.com/" target="_blank">(View on Site)</a></li>
</ul>

感谢您提供的任何帮助。

Answer 1

默认情况下，Bootstrap 会覆盖标准链接功能。您可以通过添加自己的自定义点击事件以在新窗口中打开链接来解决此问题。

HTML

<ul class="nav nav-tabs push">
    <li class="active"><a role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
    <li><a role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
    <li><a role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
    <li class="view_on_site"><a class="link-tab" href="http://www.yahoo.com/" target="_blank">(View on Site)</a></li>
</ul>

jQuery/JavaScript

$('.link-tab').click(function(){
  window.open($(this).attr('href'));
});

示例:Fiddle