title: Load iframes on tab click
body: <p>I have a bunch of tabs, in each tab I have an iframe which I want to load only when I press the tab. I don't want all the apps to be loaded once the page is loaded. How can this be accomplished?</p>
  
  <p>I'm new to JSP and Javascript..</p>
  
  <pre><code>    &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;First Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Second Menu&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
      &lt;div class="tab-content"&gt;
  
         &lt;div id="home" class="tab-pane fade in active"&gt;
            &lt;iframe id="iframe1" src=""&gt;&lt;/iframe&gt;
         &lt;/div&gt;
  
         &lt;div id="menu1" class="tab-pane fade"&gt;
            &lt;iframe id="iframe2" src=""&gt;&lt;/iframe&gt;
         &lt;/div&gt;
  
         &lt;div id="menu2" class="tab-pane fade"&gt;
            &lt;iframe id="iframe2" src=""&gt;&lt;/iframe&gt;
           &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>