बूटस्ट्रैप: अगला बटन अगले टैब

Question

प्रदर्शित करना चाहिए, मैं बूटस्ट्रैप टैब नेविगेशन में एक कस्टम अगला बटन लागू करना चाहता हूं।

अगली-बटन पर क्लिक करते समय, अगला टैब सक्रिय के रूप में प्रदर्शित किया जाना चाहिए। यदि अंतिम टैब तक पहुंच गया है तो इसे पहले टैब से शुरू करना चाहिए।

Bootply snippet

Answer 1

यह आपकी समस्या

$('.next-tab').click(function(e){ 
    if($('.nav-tabs > .active').next('li').hasClass('next-tab')){ 
    $('.nav-tabs > li').first('li').find('a').trigger('click'); 
    }else{ 
    $('.nav-tabs > .active').next('li').find('a').trigger('click'); 
    } 
    e.preventDefault(); 
}); 

http://www.bootply.com/XYpxMIgink

Answer 2

मैं हाल ही में इस कार्यक्षमता की जरूरत को सुलझाने और यह है कि क्या मैं के साथ समाप्त हो गया है:

$('.change-tab').click(function() { 
 
    var $this = $(this); 
 
    var $nav = $($this.data('target')) 
 
    var $tabs = $nav.find('li'); 
 
    var $curTab = $tabs.filter('.active'); 
 
    var cur = $tabs.index($curTab); 
 
    if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a'); 
 
    else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a'); 
 
    $showTab.tab('show'); 
 
}); 
 

 

 

 
// normal tabs code 
 
$('#myTab a').click(function (e) { 
 
\t e.preventDefault(); 
 
\t $(this).tab('show'); 
 
}); 
 

 
$(function() { 
 
$('#myTab a:last').tab('show'); 
 
})

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <ul class="nav nav-tabs" id="myTab"> 
 
    <li class="active"><a href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#profile">Profile</a> 
 
    </li> 
 
    <li><a href="#messages">Messages</a> 
 
    </li> 
 
    <li><a href="#settings">Settings</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div class="tab-pane active" id="home">Home content...</div> 
 
    <div class="tab-pane" id="profile">Content here...</div> 
 
    <div class="tab-pane" id="messages">Messages...</div> 
 
    <div class="tab-pane" id="settings">Settings...</div> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="btn-toolbar pull-right"> 
 
     <div class="btn-group"> 
 
     <button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button> 
 
     <button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

मैं @ DelightedD0D प्रदान किए गए समाधान का उपयोग कर रहा हूं। जब पृष्ठ लोड होता है, तो नियंत्रण हमेशा अंतिम टैब पर रुक जाता है। आप इसे ठीक करना चाहते हैं,

$(function() { 
$('#myTab a:active').tab('show'); 
})