Tek bir gezinme sekmesi ile birden çok sekme içeriğini denetleme

Question

Düzenli bir Twitter Bootstrap 3 sekmem var. Benim yapmak istediğim, bir nav-tabs elemanı ile birden çok
tab-content konteynerini kontrol etmektir. Sekmeleri değiştirdiğinizde, sadece ilki değiştirilir, bu örnekte jsfiddle

: Burada

bir örnektir. Her iki kapın da değişmesini istiyorum, sadece ilkini değil.

Teşekkürler!

Answer 1

Ben güncellemek senin jsfiddle

Ben-elemanlarına veri hedef özelliği eklemeniz ve bu satırları değiştirilmiş

ikinci sekme içeriğinde kimlikleri değiştirmek,

Sayfanız:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li> 
<li><a href="#profile" data-toggle="tab">C2</a> </li> 

Benim güncelleme:

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li> 
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a> </li> 

Ve ikinci sekme içerik, Sevgiler:

<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="home"> 
     <p>Content 1.</p> 
    </div> 
    <div class="tab-pane fade" id="profile"> 
     <p>Content 2.</p> 
    </div> 
</div> 

My güncelleme:

<div id="myTabContent2" class="tab-content"> 
    <div class="tab-pane fade in active" id="home_else"> 
     <p>Content 1.</p> 
    </div> 
    <div class="tab-pane fade" id="profile_else"> 
     <p>Content 2.</p> 
    </div> 
</div> 

Answer 2

Kimlik benzersiz olmalıdır.

İki element id ev, profil ve myTabContent ile koduyla

Oku Two HTML elements with same id attribute: How bad is it really?

sorunu.

<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="home"> 
     <p>Content 1.</p> 
    </div> 
    <div class="tab-pane fade" id="profile"> 
     <p>Content 2.</p> 
    </div> 
</div> 

<hr> 

<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="home"> 
     <p>Content 1.</p> 
    </div> 
    <div class="tab-pane fade" id="profile"> 
     <p>Content 2.</p> 
    </div> 
</div> 

ve sen id.Not ile kimlikli tüm öğeleri ilk elemanını hedefleyecek href="#home" veriyoruz. İşte

<ul id="myTab" class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">C1</a></li> 
    <li><a href="#profile" data-toggle="tab">C2</a></li> 
</ul> 

Answer 3

sadece yerine bir sınıf kullanmalısınız. Sadece bir modal pencerede Bootstrap 3 sekmeli içerik üzerinde çalışıyordum. Modal pencereyi doğru sekmeye açmak için çalışıyordum, ancak iki tane sekmeye ihtiyacım vardı, biri modal başlık için, diğeri ise altbilgideki fazladan tırnak sekmeleriyle.

Bir sınıf kullandım ve işe yaradı. Yani <div class="tab-pane fade in active" id="home">'u <div class="tab-pane fade in active home"> ve <a href="#home" data-toggle="tab"> ile <a href=".home" data-toggle="tab"> arasında değiştirin ... benim için çalıştı.