动态打开多个选项卡

Question

我正在使用 bootstrap 和 jQuery 来动态控制我网站上的选项卡。到目前为止，每个按钮只针对一个元素，但我想针对多个元素。

这是我的一些代码：

<!-- Dynamic Tabs controller -->
<script>
$(document).ready(function() {
  $(".nav-tabs a").click(function() {
    $(this).tab('show');
  });
});
</script>

<!-- Navigation Tabs -->
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#staff"> 
  </li>
  <li>
    <a href="#tech">
  </li>
</ul>

<!-- Elements to show -->
<div id="staff" class="tab-pane fade"></div>
<div id="tech" class="tab-pane fade"></div>

现在如何通过按单个导航选项卡同时打开员工和技术人员？

Answer 1

尝试改变这个：

$(this).tab('show');

收件人：

$("#staff, #tech").tab('show');

您可以在 JavaScript here, get documentation for that boostrap function here (scroll to tabs), and learn about jQuery's multiple selector syntax here 中了解 this 的概念，这是一个逗号分隔的选择器列表。

Answer 2

好的，我自己设法解决了这个问题。我会 post 一个答案来帮助其他人寻找相同的解决方案。

诀窍是使用 data-target.

修改后的代码如下：

<!-- Navigation Tabs -->
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#staff" data-target="#staff, #tech"> 
  </li>
</ul>

现在当我点击员工按钮时，员工和技术选项卡都会打开。

动态打开多个选项卡

Dynamically opening multiple tabs

jquery

tabs

twitter-bootstrap