使用Tabbable选项卡将选项卡内容#ID返回到两个DIV

时间:2012-06-20 20:49:00

标签: javascript twitter-bootstrap

我已经为每个data-toogle =“Tab”指定了一个NavBar,而没有编写任何Javascript并使用Twitter Bootstrap的“tabbable tabs”:

 <ul class="tabnavcenter">
      <li class="active"><a href="#home" data-toggle="tab">**Name 1**</a></li>
      <li><a href="#tab2" data-toggle="tab">Name 2</a></li>

 </ul>

...然后使用以下内容返回上面的内容:

<div class="tab-content">
  <div class="tab-pane active" id="home">
   **Content 1** 
  </div>
</div>

这很好,很简单并且工作完美但是现在我需要破解它才能将标签内容返回到两个单独的DIV。这是twitter的标签的API:

/* TAB DATA-API
   * ============ */

 $(function () {
   $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
     e.preventDefault()
   $(this).tab('show')
   })
  })

 }(window.jQuery);

这正是我要做的事情:

enter image description here

...因此,当您单击#tab 1时,内容会显示在其上方和下方。

谢谢。

0 个答案:

没有答案