Я пытаюсь использовать мастер начальной загрузки 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");}
});
});