2014-09-25 14 views
8

बूटस्ट्रैप 3 का उपयोग करके मैं ली तत्व में वर्ग = "सक्रिय" का उपयोग करके इस exameple की कोशिश कर रहा हूँ। दुर्भाग्यवश जब पृष्ठ प्रारंभ में दिखाई देता है न तो टैब फलक दिखाया जाता है, तो संपूर्ण टैब सामग्री खाली होती है। टैब नौसेना सही तरीके से प्रदर्शित होती है और जब मैं स्पष्ट रूप से किसी टैब पर क्लिक करता हूं, तो सही फलक दिखाई देती है।डिफ़ॉल्ट रूप से बूटस्ट्रैप 3 टैब एनएवी कैसे सक्रिय करें?

मुझे क्या याद आ रही है?

अग्रिम धन्यवाद।

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li> 
    <li><a href="#graduate" data-toggle="tab">graduate</a></li> 
    <li><a href="#extension" data-toggle="tab">extension</a></li> 
</ul> 
<div class="tab-content" id="TabContent"> 
    <div class="tab-pane fade" id="graduation"> 
     <p> 
      anything 
     </p> 
    </div> 
    <div class="tab-pane fade" id="graduate"> 
     <p> 
      graduate 
     </p> 
    </div> 
    <div class="tab-pane fade" id="extension"> 
     <p> 
      extension 
     </p> 
    </div> 
</div> 

उत्तर

21

तुम भी डिफ़ॉल्ट tab-pane पर active वर्ग निर्दिष्ट करने के लिए (और टैब fading के लिए आप in वर्ग जोड़ने की जरूरत है) इस प्रकार आप बदलना चाहिए की जरूरत है,

<div class="tab-pane fade" id="graduation"> 

को

<div class="tab-pane fade in active" id="graduation"> 
+0

धन्यवाद किया कि यह तुलना में। यह दिलचस्प है कि इसके बारे में कितने कामकाजी नमूने बाहर नहीं हैं। –

+3

मैं हमेशा [आधिकारिक दस्तावेज] (http://getbootstrap.com/javascript/#tabs) का उपयोग करता हूं, जब तक कि ऐसा कुछ न हो जो मैं वहां नहीं ढूंढ पा रहा हूं। –

2

जो भी बूटस्ट्रैप 4

के लिए उत्तर की तलाश में है

बूटस्ट्रैप 4

<div class="tab-pane fade show active" id="graduation"> 
<div class="tab-pane fade" id="graduation"> 

बूटस्ट्रैप के लिए 3

<div class="tab-pane fade in active" id="graduation"> 
<div class="tab-pane fade in" id="graduation"> 
संबंधित मुद्दे