Кнопки «Продолжить» и «Предыдущая» не работают с начальной загрузкой Javascript

Question

Ниже приведен фрагмент кода, который я пытался заставить работать.Кнопки «Продолжить» и «Предыдущая» не работают. В JavaScript не отображаются следующие и предыдущие вкладки.

Javascript:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $('.prev').click(function () {
        ;
        var prevId = $(this).parents('.tab-pane').prev().attr("id");    
        $('[href=#' + prevId + ']').tab('show');

        return false;

    });


    $('.next').click(function () {

        var nextId = $(this).parents('.tab-pane').next().attr("id");

        $('[href=#' + nextId + ']').tab('show');

        return false;

    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

        //update progress
        var step = $(e.target).data('step');
        var percent = (parseInt(step) / 6) * 100;

        $('.progress-bar').css({ width: percent + '%' });
        $('.progress-bar').text("Step " + step + " of 6");

        //e.relatedTarget // previous tab

    })

    $('.first').click(function () {

        $('#myWizard a:first').tab('show');

    })
</script>

HTML:

<div class="navbar">
    <div class="navbar-inner">
        <ul id="tabs1" class="nav nav-pills">
           <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
           <li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
           <li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
           <li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
           <li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
           <li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
        </ul>
    </div>

полный код: https://www.codeply.com/go/RMKW5H5u2e

Answer 1

Вам не хватает кавычек в $('[href=#' + nextId + ']') и $('[href=#' + prevId + ']')

Должно быть:

$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');

Answer 2

Итак, ваша проблема в синтаксисе jQuery (вы должны посмотреть на вывод консоли, вы бы поймали ошибку).

Что нужно:

$('.prev').click(function(){

  var prevId = $(this).parents('.tab-pane').prev().attr("id");
  
  $('a[href$=\"#'+prevId+'\"]').tab('show');
  return false;
  
})

$('.next').click(function(){
  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('a[href$=\"#'+nextId+'\"]').tab('show');
  return false;
  
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
  //update progress
  var step = $(e.target).data('step');
  var percent = (parseInt(step) / 6) * 100;
  
  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of 6");
  
  //e.relatedTarget // previous tab
  
})

$('.first').click(function(){

  $('#myWizard a:first').tab('show')

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" id="myWizard">
  
   <h3>New Anomaly Detection Model</h3>
  
   <hr>
  
   <div class="progress">
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6" style="width: 20%;">
       Step 1 of 6
     </div>
   </div>
  
   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
               <li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
               <li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
               <li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
               <li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
               <li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
            </ul>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane fade in active" id="step1">
         
        <div class="well"> 
          
            <label>Security Question 1</label>
            <select class="form-control input-lg">
              <option value="What was the name of your first pet?">What was the name of your first pet?</option>
              <option value="Where did you first attend school?">Where did you first attend school?</option>
              <option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
              <option value="What is your favorite car model?">What is your favorite car model?</option>
            </select>
            <br>
            <label>Enter Response</label>
            <input class="form-control input-lg">
            
        </div>
         <a class="btn btn-default btn-lg next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step2">
         <div class="well"> 
          
            <label>Choose Your Input Source</label>
            <select class="form-control  input-lg">
              <option selected="" value="CSV">CSV</option>
              <option value="Database">Database</option>
            </select>
            <br>
            <label>Path</label>
            <input class="form-control  input-lg">
            
         </div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step3">
        <div class="well"> <h2>Step 3</h2> Add another step here..</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step4">
        <div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step5">
        <div class="well"> <h2>Step 5</h2> Almost there!</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
       <div class="tab-pane fade" id="step6">
        <div class="well"> <h2>Step 6</h2> Last one!</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-success first" href="#">Start over</a>
      </div>
   </div>
  
   <hr>
  
   <a href="http://www.bootply.com/wj9gWh8ulj">Edit on Bootply</a>
  
   <hr>
  
</div>

Обратите внимание, что $("a[href$=\"#'+prevId+'\").tab('show'); - это то, что заставляет ваши кнопки работать.

Источник моего ответа: Выберите тег с помощью href