एक "अगले" बटन है कि जावा स्क्रिप्ट और ट्विटर बूटस्ट्रैप

Question

का उपयोग करके टैब स्विच बनाने के लिए कैसे मैं निम्नलिखित कोड है: http://jsfiddle.net/h6rQ2/2/

मैं एक बुनियादी रूप बनाने के लिए एचटीएमएल उपयोग कर रहा हूँ। इस फ़ॉर्म में दो खंड हैं - प्रत्येक अनुभाग एक टैब के भीतर निहित है (ट्विटर बूटस्ट्रैप के साथ बनाए गए टैब)।

मैं "अगला" बटन कैसे बना सकता हूं जो पहले टैब से दूसरे टैब पर स्विच करता है? जब मैं इसे अभी करने की कोशिश करता हूं, तो यह केवल फॉर्म सबमिट करता है। क्या ट्विटर बूटस्ट्रैप पहले से ही एक फ़ंक्शन प्रदान करता है जो आपको बाहरी बटन के माध्यम से टैब स्विच करने देता है? यदि हां, तो आप इसका उपयोग कैसे करते हैं?

Answer 1

को देखते हुए उन बटन:

<div class="btn-group"> 
    <button class="btn" id="prevtab" type="button">Prev</button> 
    <button class="btn" id="nexttab" type="button">Next</button> 
</div> 

आप इस आवश्यकता होगी JS:

var $tabs = $('.tabbable li'); 

$('#prevtab').on('click', function() { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

$('#nexttab').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

Working demo (jsfiddle)

Answer 2

यह चक्रीय (अंतिम टैब के पहले चला जाता है बनाने के लिए, पहला टैब पिछले को जाता है), यहां मेरा कोड है:

function previousVin(){ 
    var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]'); 
    if(previousElement.html()===undefined){ 
     $('#myTab a:last').tab('show'); 
    }else{ 
     previousElement.tab('show'); 
    } 
} 
function nextVin(){ 
    var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]'); 
    if(nextElement.html()===undefined){ 
     $('#myTab a:first').tab('show'); 
    }else{ 
     nextElement.tab('show'); 
    } 
} 

Answer 3

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

$('a[data-toggle^="tab"]').click(function(){ 
    var data = $(this).attr("href"); 
    $('a[data-toggle^="tab"]').parent("li").removeClass("active"); 
    $('li a[href^="'+data+'"]').parent("li").addClass("active"); 
    $('.tab-pane').removeClass("active"); 
    $(data).addClass("active"); 
}) 

आप इन कहीं भी

<a href="#tabname2" data-toggle="tab">Next</a> 
<a href="#tabname1" data-toggle="tab">Previous</a>