Bootstrap tabs not switching in Wordpress - wordpress

Question

I am trying to use Bootstrap Tabs in my wordpress project. I can see the tabs in the browser window but the tabs are not switching.
Here is the code I am using. The tabs are basically the example from the Bootstrap docs which are repeated in many places in stackoverflow. However in my Wordpress project they still don't switch.
function jrtrs_add_bootstrap(){
$src = plugin_dir_url( __FILE__ ) . 'css/bootstrap.min.css';
wp_register_style('trs_bootstrap-style', $src);
wp_enqueue_style('trs_bootstrap-style');
}
// Add js scripts
function jrtrs_add_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('nav-tabs', plugin_dir_url( __FILE__ ) . 'js/bootstrap-tab.js', array('jquery'));
wp_enqueue_script( 'tracking-settings-ajax-request', plugin_dir_url( __FILE__ ) . 'js/tracking-settings.js', array('jquery'));
}
add_action('wp_print_scripts', 'jrtrs_add_scripts');
add_shortcode('ms_betfair_plugin', 'jrtrs_display_form');
function jrtrs_display_form() {
jrtrs_add_bootstrap();
$htmlStr = <<<EOD
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Reeeeeeeeed</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
EOD;
return $htmlStr;
}
... and the JavaScript ....
jQuery(document).ready(function () {
jQuery('#tabs a').click(function (e) {
//alert("tab clicked");
e.preventDefault();
jQuery(this).tab('show');
})
});

Answer 1

I think you are misunderstanding something. You should not have to write any jQuery at all to make the bootstrap tabs work. It should work as soon as you drop in the html.
My best guess is that there is a javascript error.
As a trouble-shooting task, I would recommend downloading and including the full bootstrap.js rather than just bootstrap-tab.js.