<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="col-md-12" id="tabs-wrap"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#billing" aria-controls="billing" role="tab" data-toggle="tab" aria-expanded="true">Billing Address</a> </li> <li> <a href="#shipping" aria-controls="shipping" role="tab" data-toggle="tab" aria-expanded="false">Delivery Address</a> </li> <li> <a href="#review" aria-controls="review" role="tab" data-toggle="tab" aria-expanded="false">Review & Payment</a> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="billing"> <h3 class="">Billing Address</h3> <p>Billing Address Form</p> <a class="btn btn-primary continue">Continue</a> </div> <div role="tabpanel" class="tab-pane" id="shipping"> <h3 class="">Shipping Address</h3> <p>Shipping Address Form</p> <a class="btn btn-primary back">Go Back</a> <a class="btn btn-primary continue">Continue</a> </div> <div role="tabpanel" class="tab-pane" id="review"> <h3 class="">Review & Place Order</h3> <p>Review & Payment Tab</p> <a class="btn btn-primary back">Go Back</a> <a class="btn btn-primary continue">Place Order</a> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $('.continue').click(function() { $('.nav-tabs > .active').next('li').find('a').trigger('click'); }); $('.back').click(function() { $('.nav-tabs > .active').prev('li').find('a').trigger('click'); }); $('#tabs-wrap a[data-toggle="tab"]').bind('click', function (e) { alert($(e.target).attr('href')); return true; }); </script>