title: How to load a html file into div tabs using javascript
body: <p>I have created nav-tabs using bootstrap. Now I want to load html files into tab content on tab click. Can someone help me with java script.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;ul class="nav nav-pills nav-stacked"&gt;
         &lt;li class="active"&gt;&lt;a data-toggle="pill" id="Home" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a data-toggle="pill" id="Menu1" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a data-toggle="pill" id="Menu2" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;
        &lt;div class="tab-content"&gt;
           &lt;div id="home" class="tab-pane fade in active"&gt; 
           &lt;/div&gt;
           &lt;div id="menu1" class="tab-pane fade"&gt;    &lt;h3&gt;Menu 1&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div id="menu2" class="tab-pane fade"&gt; &lt;h3&gt;Menu 2&lt;/h3&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>In the above code, when i click on the home tab i want to load an external html(x.html) file into home div under tab-content div. I want the same functionality when i click on the menu1 tab(y.html). When I load (y.html) i need to hide (x.html).  Someone please help me...!!!</p>
  
  <p>I used the below javascript. But it is not working.:</p>
  
  <pre><code>$('a#Home').click(function(){
      $("#home").load("x.html");
  });
  $('a#Menu1').click(function(){
     $("#menu1").load("y.html");
  });
  </code></pre>