引导 onClick 更改选项卡并同时定位新窗口答案

【问题标题】：Bootstrap onClick change tab and target a new windows at the same time引导 onClick 更改选项卡并同时定位新窗口
【发布时间】：2017-06-08 04:55:03
【问题描述】：

所以我的一个引导选项卡内容中有一个按钮，并且我有大约 5 个导航选项卡。我想要做的是当您单击按钮转到最后一个选项卡并同时启动一个新窗口时。

这是我尝试过的。

 <a href="#done" 
 onClick="window.open('https://amazon.com', '_blank')" 
 class="btn btn-success"> Marketplace</a>

它会启动新窗口，但选项卡不会移动到最后一个选项卡。有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap tabs

【解决方案1】：

使用单击处理程序来处理引导选项卡更改并打开一个窗口。您可以将每个选项卡所需的 URL 放入元素的数据属性中并动态读取。

由于 SO 沙箱不允许弹出窗口，这里有一个 codepen https://codepen.io/anon/pen/dRYOmE

$('#myTabs a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show');
  window.open($(this).attr('data-url'), '_blank');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id="myTabs">
    <li role="presentation" class="active"><a href="#home" data-url="http://www.amazon.com" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" data-url="http://www.stackoverflow.com" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" data-url="http://www.google.com" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages</div>
  </div>

</div>

【讨论】：