jquery - Bootstrap 选项卡 : Show Element Across All Tabs

Question

我不确定这是否可能，但如果可以的话，那就太棒了。

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

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

问题是...我使用的是 ASP.net，所以我不能使用 jQuery 在更改时在选项卡之间移动元素，因为它会弄乱 .Net...

我想的唯一方法是以某种方式可能在我想在所有选项卡中显示的 div 上设置一个超高的 z-index，但是，我相信如果它起源于的选项卡被隐藏，那将不会起作用。

这里有一些代码作为例子:

 <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 .然后就是对两个“盒子”进行样式设置的情况。

HTML

<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