Question

我有一些Boostrap标签操作。它有3个标签，可以在同一页面中加载内容。这一切都很完美！

但是，在第4个选项卡上，我有一个我想在新窗口中打开的链接。也许我不应该为最后一个元素使用tab函数，但它在页面和使用它的移动设备上看起来最好。有没有办法使用引导选项卡链接到外部链接？

<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

Answer 2

删除data-toggle =＆＃34;标签＆＃34;属性，它不会触发bootstrap挂钩。

Credit to @Chamika Sandamal

Bootstrap选项卡用作外部链接

2 个答案: