Question

我在这里找到了http://www.codeply.com/go/bp/wj9gWh8ulj 我试图通过应用这些代码来了解更多关于javascript和jquery的信息，但是我遇到了一个错误，实现了这个进度条，并且由于某种我不知道的原因，继续按钮不起作用。

<html>
<head>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">

<script src="js/bootstrap.min.js"></script>
<script>
  $('.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) / 5) * 100;

    $('.progress-bar').css({width: percent + '%'});
    $('.progress-bar').text("Step " + step + " of 5");
    //e.relatedTarget // previous tab
  })

  $('.first').click(function(){
    $('#myWizard a:first').tab('show')
  })
</script>
</head>

<body>

<div class="container" id="myWizard">

<h3>Bootstrap Wizard</h3>

<hr>

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 20%;">
Step 1 of 5
</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">Step 1</a></li>
       <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
       <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
       <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
       <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</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>Security Question 2</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 selected="" 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 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 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 next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> You're Done!</div>
 <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>



<!-- Bootstrap Core JavaScript -->

<!-- js of the slider blugin-->


</body>

</html>

Answer 1

它对我有用：http://codepen.io/wvankuipers/pen/qdxVpw

我猜你遇到的问题是你在加载之前尝试使用jQuery / Bootstrap。要在此块中修复此Javascript代码：

$(function(){ 
     /* Your code here */
});

在此处详细了解：http://api.jquery.com/jquery/#jQuery3

简短版本：这将确保在代码执行之前完全加载DOM（并加载所需的JS）。

Javascript问题|进度条

1 个答案: