एक एनवी-टैब

के साथ एकाधिक टैब-सामग्री को नियंत्रित करें मेरे पास नियमित Twitter Bootstrap 3 टैब है। मैं क्या करना चाहता हूं इसे नियंत्रित करना है
tab-content कंटेनर को nav-tabs तत्व के साथ नियंत्रित करना है। jsfiddle एक एनवी-टैब

इस उदाहरण में, जब मैं टैब बदलने, केवल पहले बदल गई है:

यहाँ एक उदाहरण है। मैं दोनों कंटेनरों को बदलने के लिए चाहता हूं, न केवल पहले।

धन्यवाद!

स्रोत

2013-11-01 intelis

यहाँ मैं अद्यतन अपने jsfiddle

मैं एक-तत्वों के लिए डेटा लक्ष्य विशेषता जोड़ सकते हैं और दूसरे टैब-सामग्री

मैं इस लाइनों संशोधित में आईडी बदलने के लिए,

आपका:

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

मेरे अद्यतन:

<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>

और दूसरा टैब-सामग्री, तुम्हारा:

<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>

मेरे अद्यतन:

<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>

स्रोत

2013-11-01 02:22:08 artgladun

यही वह है जिसे मैं ढूंढ रहा था। धन्यवाद – intelis

@intelis आईडी आईडी = "myTabContent" हटाएं क्योंकि आईडी अद्वितीय होनी चाहिए। –

कक्षाओं के साथ डेटा-लक्षित काम भी करेगा? – lindhe

आईडी अद्वितीय होना चाहिए। अपने कोड आईडी घर, प्रोफाइल और myTabContent साथ

दो तत्वों के साथ

पढ़ें Two HTML elements with same id attribute: How bad is it really?

समस्या।

<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>

और आप href="#home" जो id.Not साथ आईडी के साथ सभी तत्वों को पहले तत्व को लक्षित करेंगे दे रहे हैं।

<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>

स्रोत

2013-11-01 02:11:12

एचएम .. हाँ मुझे पता है कि आईडी अद्वितीय होना चाहिए, यह सिर्फ इतना है कि अगर मैं कक्षाओं में आईडी बदलता हूं तो यह अभी भी मेरे लिए काम नहीं कर रहा है। मुझे एक उदाहरण देने की देखभाल करें। मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं। उपरोक्त उदाहरण दस्तावेज से है। – intelis

तुम सिर्फ एक वर्ग के बजाय का उपयोग करना चाहिए। मैं सिर्फ एक मोडल विंडो के अंदर बूटस्ट्रैप 3 टैबबड सामग्री पर काम कर रहा था। मोडल विंडो को सही टैब पर खोलने की कोशिश कर रहा था, लेकिन मुझे दो टैब खोलने की आवश्यकता थी, एक मोडल हेडर के लिए, और एक सामग्री के लिए, पाद लेख में अतिरिक्त नब टैब के साथ।

मैंने कक्षा का उपयोग किया और यह काम किया। तो, <div class="tab-pane fade in active" id="home"> से <div class="tab-pane fade in active home"> और <a href="#home" data-toggle="tab"> से <a href=".home" data-toggle="tab"> ... मेरे लिए काम किया।

स्रोत

2014-06-20 10:09:26 OmniBon

यह सरल और प्रभावी है। – LiberiFatali

एक एनवी-टैब

उत्तर

संबंधित मुद्दे