stackoverflow question - http://stackoverflow.com/questions/14389974/how-do-i-get-different-tabs-to-load-separate-javascript-files. Note that it's not necessarily a good approach to reload the script on each tab change.
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Demo</title> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a class="atab" href="#a_tab" data-toggle="tab">A</a></li> <li><a class="btab" href="#b_tab" data-toggle="tab">B</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a_tab"> <h1>A</h1> <acontent></acontent> </div> <div class="tab-pane" id="b_tab"> <h1>B</h1> <bcontent></bcontent> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script> <script src="https://d3js.org/d3.v3.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> <script> $.ajaxSetup ({ // Disable caching of AJAX responses // Used when debugging cache: false }); $.getScript("a.js"); $(".atab").click(function() { $.getScript("a.js"); }) </script> <script> $(".btab").click(function() { $.getScript("b.js"); }) </script> </body></html> Modified http://code.jquery.com/jquery-latest.js to a secure url
Modified http://d3js.org/d3.v3.js to a secure url
Modified http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js to a secure url
https://code.jquery.com/jquery-latest.js
https://d3js.org/d3.v3.js
https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js