javascript - 如何在 Rails 3.2 应用程序中使用 Twitter Bootstrap 的 Tabbable Tabs 在单击一个选项卡时将内容返回到两个单独的 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>

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

编辑:

因为我在 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-target选择器属性。

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-pane - 加上一个空的(#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。神奇之处在于您可以使用 #id 或 .class 或任何有效的 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 中(并且为 .active 一)

演示

这是 demo (jsfiddle)和 demo with extra (jsfiddle)