Let me introduce you to this amazing thing called an 'a' tag... Simply format your tab markup as a bunch of li elements, each with a normal a tag pointing where you want it to go. You don't need any javascript (and don't use any data-xxx attributes), just the bootstrap CSS and matching markup. Since you're hitting the server to render the page, you can get the page to attach the 'active' class to the appropriate tab page you're on. You might have something like (in PHP):
<li id="page1" <?php if $currentpage == 'page1')?>class="active"><a href="page1.html">Page 1</a> <li id="page2" <?php if $currentpage == 'page2')?>class="active"><a href="page2.html">Page 2</a> etc
