web-dev-qa-db-ja.com

Bootstrapタブ：フォームの[次へ]および[前へ]ボタン

（最終的に）フォームを複数のBootstrap 3.xタブに分割しようとしていますが、前と次のボタンに問題があります。最初の次のボタンが機能し、タブのコンテンツがタブを手動でクリックしたときにタブ間でまったく変更されませんORボタンを使用して。

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary" id="btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnNext">Next</a>
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
</div>
<script>
  $('#btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('#btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
javascriptjquerytwitter-bootstraptabstwitter-bootstrap-3
28
Benjamin Morrison

まず第一に：IDは一意でなければなりません

作業コードは次のとおりです。 http://www.bootply.com/120472

HTML：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

JS：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

スニペット：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>
70
Pimento Web

bootstrap 4の場合

<button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>


$('.next').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});

$('.previous').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
4
Jagadesha NH

タブで次の前の操作を実行する場合は、次の手順に従います。

a）各タブパネルに次の前のボタンを配置する

b）ボタンのクリックをボディにバインドし、クリック時に呼び出されるようにします

c）クリックトリガーで、次/前のタブのクリック

d）最後のタブの場合、ユーザーを適切なタブにリダイレクトします（最初または最後のタブのイベントを表示する）

/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
      var next = jQuery('.nav-tabs > .active').next('li');
      if(next.length){
        next.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:first').tab('show');
      }
});

jQuery('body').on('click','.previous-tab', function(){
      var prev = jQuery('.nav-tabs > .active').prev('li')
      if(prev.length){
        prev.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:last').tab('show');
      }
});
/******* CSS *********/
.previous-tab,
.next-tab{
        display: inline-block;
        border: 1px solid #444348;
        border-radius: 3px;
        margin: 5px;
        color: #444348;
        font-size: 14px;
        padding: 10px 15px;
        cursor: pointer;
}
<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Step1</a></li>
    <li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Step2</a></li>
</ul>
<div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="step1">
    <p>tab1 content</p>
                <p>//Include next prev buttons in the tab-content</p>
                <span class="previous-tab">previous</span>
                <span class="next-tab">next</span>
    </div>
    <div role="tabpanel" class="tab-pane" id="step2">
                <p>tab2 content</p>
    <p>//Include next prev buttons in the tab-content</p>
                <span class="previous-tab">previous</span>
                <span class="next-tab">next</span>
        </div>
</div>
0
spaceprg