我正在尝试使用 twitter 引导向导（http://vinceg.github.io/twitter-bootstrap-wizard/），并且由于某种原因，当第一个选项卡/药丸下一个按钮显示它已被禁用时。当我点击它时，该按钮确实有效，但它似乎没有完全激活。
这是我看到的功能的视频。You will notice that when the tab first opens tab 1 is selected. 进度条为 0%，下一个按钮显示为禁用。当我单击下一步时，它会移动到下一个选项卡。当我返回到第一个选项卡时，进度条具有正确的选项卡 1 宽度，现在选项卡 1 的下一个按钮不再被禁用。理想情况下，我希望这个功能从一开始就起作用。
YouTube 视频： https ://youtu.be/zq9yCCUJQ68
HTML：
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
<strong>Website Admin Login: </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
<strong>Website Admin Login: </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
<strong>Website Admin Login: </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
<strong>Website Admin Login: </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});