我正在尝试使用twitter引导向导（http://vinceg.github.io/twitter-bootstrap-wizard/），并且由于某些原因，当第一个选项卡/药片中的下一个按钮显示为已禁用时。当我单击该按钮时，它确实起作用，但它似乎并未完全激活。
这是我看到的功能的视频。您会注意到，在第一次打开选项卡时，选择了选项卡1。进度栏为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");}
});
});
答案 0 :(得分：0)
我认为此问题正在发生，因为它在另一个选项卡窗格中。我试图使用JQuery附加HTML，似乎已经解决了这个问题。