Question

所以我的一个引导标签内容中有一个按钮，我有大约5个导航标签。我想要做的是当你点击按钮进入最后一个标签并同时启动一个新窗口时。

这是我尝试过的。

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

它会启动新窗口，但标签不会移动到最终标签。有什么想法吗？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap onClick更改选项卡并同时定位新窗口

1 个答案: