使用 Twitter Bootstrap data-toggle="tab" 在两个不同的地方返回标签内容

Question

我通过在导航栏中指定 data-toggle="tab" 来激活 bootstrap.js 选项卡：

<li><a href="#tab2" data-toggle="tab">Look Inside</a></li>

然后，返回这些选项卡的内容：

<div class="tab-content">
<div class="tab-pane active" id="tab1">Content
</div>
</div>

我想知道如何将相同的内容返回到页面上的两个不同位置，每个位置都位于不同的 div 中。截至目前，我补充说：

...在第一个 div 关闭后第二次（我必须关闭它，因为我在顶部内容和底部内容之间有一个水平导航栏）并且它不返回内容。

有什么方法可以让我将“标签内容”称为其他东西，并且仍然让它保持 twitter 引导功能。

TY

Answer 1

有两种方法可以做到这一点。一种是纯 CSS，利用引导下拉菜单将打开任何菜单这一事实。例如：

myvew.html.haml

%ul.nav.nav-pills
  %li.dropdown
    %a.dropdown-toggle{"data-toggle" => "dropdown"}
      Foo
      %b.caret
    %ul.dropdown-menu{style: "position: relative; top: -10px;"}
      %li Bar1
    %ul.dropdown-menu
      %li Bar2

这样做的作用是，当点击“Foo”链接时，“Bar1”和“Bar2”都会显示出来。

---

不过，我更喜欢这种方法：在“Foo”链接上注册一个事件侦听器，然后事件侦听器为目标divs 切换.show() 或.hide()。

$(document).ready(function() {
  $('#myclickdiv').click(function() {
    $('.mydivs').collapse("show");
  });
});