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中了解this的概念，获取该boostrap function here的文档（滚动到标签页），并了解jQuery的multiple selector syntax here }，这是一个以逗号分隔的选择器列表。

Answer 2

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

诀窍是使用数据目标。

以下是修改后的代码：

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

现在，当我点击员工按钮时，工作人员和技术标签都在打开。

动态打开多个标签

2 个答案: