<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <ul class="nav nav-wizard"> <li class="active"> <a href="#step1" data-toggle="tab">Billing Details</a> </li> <li class="disabled"> <a href="#step2" data-toggle="tab">Delivery Method</a> </li> <li class="disabled"> <a href="#step3" data-toggle="tab">Payment Method</a> </li> <li class="disabled"> <a href="#step4" data-toggle="tab">Confirm Order</a> </li> </ul> <form> <div class="tab-content"> <div class="tab-pane active" id="step1"> <h3>Step 1</h3> <p>This is step 1</p> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary">Continue</button></li> </ul> </div> <div class="tab-pane" id="step2"> <h3>Step 2</h3> <p>This is step 2</p> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary">Continue</button></li> </ul> </div> <div class="tab-pane" id="step3"> <h3>Step 3</h3> <p>This is step 3</p> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary">Continue</button></li> </ul> </div> <div class="tab-pane" id="step4"> <h3>Complete</h3> <p>You have successfully completed all steps.</p> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>

body{ margin: 20px auto; } ul.nav-wizard { background-color: #f1f1f1; border: 1px solid #d4d4d4; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 3px; position: relative; overflow: hidden; } ul.nav-wizard:before { position: absolute; } ul.nav-wizard:after { display: block; position: absolute; left: 0px; right: 0px; top: 138px; height: 47px; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; z-index: 11; content: " "; } ul.nav-wizard li { position: relative; float: left; height: 46px; display: inline-block; text-align: center; padding: 0 20px 0 30px; margin: 0; font-size: 16px; line-height: 46px; } ul.nav-wizard li a { color: #428bca; padding: 0; } ul.nav-wizard li a:hover { background-color: transparent; } ul.nav-wizard li:before { position: absolute; display: block; border: 24px solid transparent; border-left: 16px solid #d4d4d4; border-right: 0; top: -1px; z-index: 10; content: ''; right: -16px; } ul.nav-wizard li:after { position: absolute; display: block; border: 24px solid transparent; border-left: 16px solid #f1f1f1; border-right: 0; top: -1px; z-index: 10; content: ''; right: -15px; } ul.nav-wizard li.active { color: #3a87ad; background: #dedede; } ul.nav-wizard li.active:after { border-left: 16px solid #dedede; } ul.nav-wizard li.active a, ul.nav-wizard li.active a:active, ul.nav-wizard li.active a:visited, ul.nav-wizard li.active a:focus { color: #989898; background: #dedede; } ul.nav-wizard .active ~ li { color: #999999; background: #f9f9f9; } ul.nav-wizard .active ~ li:after { border-left: 16px solid #f9f9f9; } ul.nav-wizard .active ~ li a, ul.nav-wizard .active ~ li a:active, ul.nav-wizard .active ~ li a:visited, ul.nav-wizard .active ~ li a:focus { color: #999999; background: #f9f9f9; } ul.nav-wizard.nav-wizard-backnav li:hover { color: #468847; background: #f6fbfd; } ul.nav-wizard.nav-wizard-backnav li:hover:after { border-left: 16px solid #f6fbfd; } ul.nav-wizard.nav-wizard-backnav li:hover a, ul.nav-wizard.nav-wizard-backnav li:hover a:active, ul.nav-wizard.nav-wizard-backnav li:hover a:visited, ul.nav-wizard.nav-wizard-backnav li:hover a:focus { color: #468847; background: #f6fbfd; } ul.nav-wizard.nav-wizard-backnav .active ~ li { color: #999999; background: #ededed; } ul.nav-wizard.nav-wizard-backnav .active ~ li:after { border-left: 16px solid #ededed; } ul.nav-wizard.nav-wizard-backnav .active ~ li a, ul.nav-wizard.nav-wizard-backnav .active ~ li a:active, ul.nav-wizard.nav-wizard-backnav .active ~ li a:visited, ul.nav-wizard.nav-wizard-backnav .active ~ li a:focus { color: #999999; background: #ededed; }

$(document).ready(function () { //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".btn-primary").click(function (e) { var $active = $('.wizard .nav-wizard li.active'); $active.next().removeClass('disabled'); nextTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); }