My goal is to trigger the loading of the step two tab and activate the appropriate steps div when an option in step one is clicked.
Since you haven't provided any markup, I'm assuming you're unsure of where to begin. You can refer to the Bootstrap documentation to put all this together.
Start by setting up the tab markup with the data-toggle="tab" attribute.
<div class="text-center">
<a class="btn btn-primary" href="#step1" data-toggle="tab">Step 1</a>
<a class="btn btn-default" href="#step2" data-toggle="tab">Step 2</a>
<a class="btn btn-default" href="#step3" data-toggle="tab">Step 3</a>
</div>
Then, set up your tab-content with individual panes containing the buttons.
<div class="tab-content">
<div id="step1" class="tab-pane active">
<div>
<h1>Step 1</h1>
</div>
<div class="text-right">
<a class="btn btn-default next" href="#">Next</a>
</div>
</div>
...
</div>
Utilize the Bootstrap example for event handling, shown.bs.tab. This event fires on tab show after a tab has been shown.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
For instance, in step one, which involves completing your basic profile, clicking "save and continue" at the bottom loads the next tab/step and activates the appropriate div for that step.
Create a click event to handle the button click and display the next pane.
$('.next').click(function () {
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#' + nextId + ']').tab('show');
});
Check out this fiddle where everything is integrated for your review: http://jsfiddle.net/kmx4zx6n/