Bootstrap选项卡：在所有选项卡中显示元素

Question

我不确定这是否可行，但如果是这样的话会非常棒。

基本上，我使用的是bootstrap选项卡，我有大约5个单独的选项卡。

每个标签提供不同的功能，但是，我希望能够在所有标签中显示一个div。例如，您查看选项卡1，然后单击选项卡2，该div显示在选项卡1和选项卡2中。

这是捕获...我正在使用ASP.net，所以我不能使用jQuery在更改标签之间移动元素，因为它会弄乱.Net ...

我想的唯一方法是在某种程度上可能在我想要在所有标签上显示的div上设置一个超高的z-index，但是，我相信如果它所源自的标签被隐藏，那将无效。 / p>

以下是一些代码示例：

 <div class="tabbable">
       <ul id="applicant-tabs" class="nav nav-tabs tab-padding tab-space-3 tab-blue applicant-tabs">
            <li class="active"><a href="#registration-tab" class="registration-tab" data-color="#c0504d" data-toggle="tab">Registration</a></li>
           <li><a href="#validation-tab" class="validation-tab" data-color="#9bbb59" data-toggle="tab">Validation</a></li>
       </ul>
      <div class="tab-content" style="overflow-x:hidden;">
          <div class="tab-pane in active form-horizontal" id="registration-tab">
             <div>content that is only shown in registration tab</div>
             <div>content that can be seen in all tabs</div>
          </div>
          <div class="tab-pane in form-horizontal" id="validation-tab">
             <div>content that is only shown in validation tab</div>
          </div>
      </div>
  </div>

如果您需要任何其他说明，请与我们联系。

Answer 1

如何在tab-pane <div>之外的所有标签页中移动您想要的内容，并将其放在</div>的结束tab-content之前。然后，这只是两个“盒子”造型的案例。

<强> HMTL

<div class="tab-content" style="overflow-x:hidden;">
  <div class="tab-pane in active form-horizontal" id="registration-tab">
    <div>content that is only shown in registration tab</div>
  </div>
  <div class="tab-pane in form-horizontal" id="validation-tab">
    <div>content that is only shown in validation tab</div>
  </div>
  <div>content that can be seen in all tabs</div>
</div>

<强> CSS

.tab-pane > div,
.all-tabs-content {
  padding: 20px;
  background: #ececec;
}

.tab-pane > div {
  float: left;
}

.all-tabs-content {
  float: right;
  padding: 20px;
}

<强> http://jsbin.com/OxoZoRIp/2/edit