I am relatively new to javascript and I am using a 'plugin' you can find here:
https://github.com/VinceG/twitter-bootstrap-wizard
when I implement this code everything works fine except when the page starts no tabs are selected.
I wish the first tab to be selected. Reading through the code it would seem the following code is meant to do this
this.fixNavigationButtons = function() {
// Get the current active tab
if(!$activeTab.length) {
// Select first one
$navigation.find('a:first').tab('show');
$activeTab = $navigation.find(baseItemSelector + ':first');
}
Anyone familiar with this plugin?
the code I am using is exactly the one on this page http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-pills.html
UPDATE: here is my markup code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Form Prototype</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="rootwizard">
<ul>
<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 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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--Form Wizard-->
<script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<!--Interaction script-->
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
and test.js
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});