यूआरएल

Question

के साथ एक टैब से बूट करने वाला बूटस्ट्रैप मैं बूटस्ट्रैप 3 के साथ काम कर रहा हूं, और मुझे किसी विशिष्ट टैब पर यूआरएल जोड़ने पर कुछ समस्याएं आ रही हैं, पैनल बदलता है लेकिन सक्रिय टैब नहीं होता है। तो मुझे टैब 2 पर जाने के लिए <a href="#tab2" data-toggle="tab">link</a> लाइन चाहिए, लेकिन यह केवल टैब 2 के पैनल पर जाती है, यह टैब को सक्रिय नहीं करती है।

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p><a href="#tab2" data-toggle="tab">link</a>.</p> 
    </div> 

    <div class="tab-pane" id="tab2"> 
    <p> I'm in Section 2.</p> 
    </div> 

<div class="tab-pane" id="tab3"> 
    <p>Howdy, I'm in Section 3 </p> 
    </div> 
</div> 
</div> 

आप इस लिंक http://bootply.com/90412

Answer 1

आदेश टैब आप के रूप में bootstrap में दिखाया गया है jQuery प्लगइन का उपयोग कर सकते हैं सक्रिय करने के लिए।

$(function() { 
    $('#tab1 a').click(function (e) { 
     e.preventDefault(); 
     $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

आप इस लिंक की जाँच कर सकते हैं:: तो तुम टैब को सक्षम करने के लिए अपने कार्यक्रम के लिए jQuery कोड के इस टुकड़े जोड़ सकते हैं Updated code

Answer 2

टैब के सक्रिय उल संरचना की निर्भर करता है में इस परीक्षण कर सकते हैं:

यहाँ एचटीएमएल है। अपने उदाहरण मामले में आप (बूटस्ट्रैप के जावास्क्रिप्ट के बाद) अपने दस्तावेज़ के अंत में जोड़कर प्लगइन का क्लिक करें घटना के ऊपर लिख सकता है:

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    if($(this).parent().prop('tagName')!=='LI') 
    { 

     $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
    } 
    else 
    { 
     $(this).tab('show') 
    } 
    }) 
}); 

रेफरी: Get element type with jQuery

नोट: एक छोटा संस्करण भी काम करेंगे इस मामले में:

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
}) 
}); 

Answer 3

की तरह रोहित का जवाब है, लेकिन एक छोटे से अधिक सामान्य:

$(function() { 
    $('a.link-to-tab').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

class="link-to-tab" के साथ किसी भी एंकर टैग के लिए काम करता है और टैब आईडी को दिखाने के लिए एक href। उदाहरण के लिए, <a class="link-to-tab" href="#tab2">।