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关闭后第二次（我必须关闭它，因为我在顶级内容和底部内容之间有一个水平导航栏）并且它不返回内容。

有什么方法可以将“tab-content”称为其他东西，并且仍然保持twitter bootstrap功能。

TY

Answer 1

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

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”链接上注册一个事件监听器，然后事件监听器为目标.show()切换.hide()或div。

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

使用Twitter Bootstrap的data-toggle =“tab”在两个单独的位置返回选项卡内容

1 个答案: