如何使用Rails 3.2应用程序中的Twitter Bootstrap的Tabbable选项卡单击一个选项卡,将内容返回到两个单独的tabbable ID

Question

使用Twitter Bootstrap的bootstrap-tab.js,我有:

<ul class="tabnavcenter" id="myTab">
   <li class="active"><a href="#home" data-toggle="tab">about</a></li>
   <li><a href="#tab2" data-toggle="tab">education</a></li>
   <li><a href="#tab3" data-toggle="tab">experience</a></li>
   <li><a href="#tab4" data-toggle="tab">verified skills</a></li>
   <li><a href="#tab5" data-toggle="tab"> video</a></li>
 </ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Content 1</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

如果我放入,我怎么能得到它:

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

...配置文件中的两个位置(一次在导航栏上方,一次在导航栏下方)并且每个位置具有不同的内容,它会起作用吗？截至目前,内容出现,但一旦点击,它就会消失.可以同时有两个"活跃"的li？

编辑:

由于我在Rails 3.2应用程序中使用它,我目前在bootstrap-tab.js中有以下内容:

 $('#myTab a').click(function (e) {
   e.preventDefault();
  $(this).tab('show');
})


 $('#myTab a[href="#home"]').tab('show');
 $('#myTab a[href="#tab2"]').tab('show');
 $('#myTab a[href="#tab3"]').tab('show');
 $('#myTab a[href="#tab4"]').tab('show');
 $('#myTab a[href="#tab5"]').tab('show');
 $('#myTab a[href="#home2"]').tab('show');
 $('#myTab a[href="#tab22"]').tab('show');

在将以下内容放入user_body.html.erb之后:

 <script type="text/javascript">
    $(function () {
       $('#myTab >li>a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
        //
        $(this.getAttribute('href') + '2').html($(this).html());
       });
   });

...刷新页面后,我在div中获得第二个内容,当我点击第二个选项卡时没有变化,然后当我点击第一个选项卡时,更改回第一个'a'的名称.

一团糟.

Answer 1

这是一个没有额外JavaScript的解决方案,并且与插件API兼容.

原则是使用2 .tab-content并利用data-targetselector属性.

HTML

第一个.tab-content包含你的正常 .tab-pane

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab">profile</div>
    <div class="tab-pane messages-tab">messages</div>
    <div class="tab-pane settings-tab">settings</div>
</div>

第二个.tab-content包含.tab-paneextranal 的额外s - 加上一个空的(#notab_else这里)

<div class="tab-content">
    <div class="tab-pane active" id="home_else">home_else</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>

然后,您的标签包含一个额外属性data-target:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-target="#home, #home_else">Home</a></li>
    <li class=""><a href="#home" data-target=".home-tab">Class Home</a></li>
    <li><a href="#profile" data-target=".profile-tab">Profile</a></li>
    <li><a href="#messages" data-target=".messages-tab">Messages</a></li>
    <li><a href="#settings" data-target=".settings-tab">Settings</a></li>
</ul>

此属性data-target定义.tab-pane与其关联的(s).神奇的是你可以使用#ids或.classes或任何有效的jQuery选择器.

JavaScript的

所有你需要激活的东西都是默认代码:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

您还可以使用自己的操作来触发API定义的选项卡.

你并不需要,如果你保持对标签的默认行为.

$('#myTab a:first').tab('show');

额外

• 如果设置data-toggle="tab"为a元素,则可以不使用任何JavaScript
• 如果您将fade类添加到.tab-pane(并且fade in为.active一个),则可以使用淡入淡出效果

DEMOS

这是演示(jsfiddle)和带额外的演示(jsfiddle)