继续和以前的按钮未导航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