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-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（s）。神奇的是，您可以使用#id或.class es或任何有效的jQuery选择器。

的JavaScript

您需要激活所有内容的是默认代码：

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

您还可以使用自己的操作来触发API定义的标签。

如果您保留标签的默认行为，不需要。

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

EXTRA

如果您将data-toggle="tab"设置为a元素
如果您将fade课程添加到.tab-pane（以及fade in一个.active），则可以使用淡入淡出效果

DEMOS

以下是demo (jsfiddle)和demo with extra (jsfiddle)

Answer 2

您一次只能访问一个ID，这就是它被称为id的原因。

获取第一个内容并将其应用于第二个内容。

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

   $(this.href +'2').html($(this.href).html()

})


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

</div>


 <div class="tab-content2">
   <div class="tab-pane active" id="home2">Content 2</div>
 </div>

Answer 3

这是一个解决您问题的工作解决方案（已更新）：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
    <div class="tab-pane active" id="home2">Home Content 2</div>
    <div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#tab-content2 div").each(function(i, e){ 
        if(!$(e).hasClass('active')) $(e).hide();
    });
    $('#myTab>li>a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
        $("#tab-content2 div").each(function(i, e) {
            $(e).hide();
        });
        $(this.getAttribute('href') + "2").show();
    });
});
</script>

Answer 4

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

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="extendedView">Content 2</div>

或

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

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="home2"></div>
    <div class="tab-pane" id="profile2"></div>
    <div class="tab-pane" id="messages2"></div>
    <div class="tab-pane" id="settings2"></div>

</div>

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

4 个答案:

HTML

的JavaScript

EXTRA

DEMOS

或