Вкладки бутстрапа: показать элемент по всем вкладкам

Question

Я не уверен, что это возможно, но это было бы очень здорово, если бы оно было.

В принципе, я использую вкладки начальной загрузки, и у меня есть около 5 отдельных вкладок.

Каждая вкладка предлагает разную функциональность, однако я хотел бы иметь возможность показывать один div по всем вкладкам. Например, вы просматриваете вкладку 1, затем переходите на вкладку 2, которую div показывает в закладке 1 И вкладке 2.

Вот уловка ... Я использую ASP.net, поэтому я не могу использовать jQuery чтобы перемещать элементы между вкладками при изменении, поскольку это будет беспорядочно с .Net ...

Единственный способ, о котором я думал, - это как-то установить супер-высокий индекс z на div, который я хочу показать по всем вкладкам, однако , Я считаю, что это не сработает, если вкладка, из которой она происходит, скрыта.

Вот код, как пример:

<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