title: How to load a html file on tab click using jquery
body: <p>I have created nav-pills using bootstrap. When I click on a particular link, I want to load a html file. </p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;ul class="nav nav-pills nav-stacked"&gt;
  &lt;li class="active"&gt;&lt;a class="trigger" data-toggle="pill" href="createarray.html"&gt;Creation&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="trigger" data-toggle="pill" href="insertarray.html"&gt;Insertion&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="trigger" data-toggle="pill" href="deletearray.html"&gt;Deletion&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
   &lt;div id="create" class="tab-pane fade in active"&gt;
    &lt;h3&gt;Creating an Array&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div id="insert" class="tab-pane fade"&gt;
    &lt;h3&gt;Inserting&lt;/h3&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my javascript for loading createarray.html:</p>
  
  <pre><code>$(document).ready(function(){
      $('.trigger').click(function(e){
             e.preventDefault();
             var link = $(this).attr("href");
             $('.create').load(link);
      });
  });
  </code></pre>