动态打开多个标签答案

【问题标题】：Dynamically opening multiple tabs动态打开多个标签
【发布时间】：2015-09-21 13:41:21
【问题描述】：

我正在使用引导程序和 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>

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

【问题讨论】：

标签： jquery twitter-bootstrap tabs

【解决方案1】：

尝试改变这个：

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

收件人：

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

您可以在 JavaScript here 中了解 this 的概念，获取该 boostrap function here 的文档（滚动到选项卡），并了解 jQuery 的 multiple selector syntax here，这是一个逗号分隔的选择器列表。

【讨论】：

为了缩短代码，我仅展示了 2 个选项卡作为示例。我的代码中有比这 2 个更多的选项卡。在不同的情况下，我希望我的选项卡选择一个或多个元素。
@KoKsMAN 如果您对不同的组有不同的触发器，那么您需要为每个组使用不同的点击函数，或者需要一些逻辑来确定它在现有点击函数中属于哪个组。在 jsfiddle 中分享您的整个代码，并注意其中的内容，我可以提供建议。

【解决方案2】：

好的，我自己设法解决了这个问题。我将发布答案以帮助其他人寻找相同的解决方案。

诀窍是使用 data-target。

这是修改后的代码：

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

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

【讨论】：