title: How to load a html file into tab-content using jquery
body: <p>I have created a nav-pills using bootstrap and trying to load html files into tab-content.When i click on one button i want to load x.html and when i click on another button I want to load y.html . These two html files has same code but inside paragraph content is different. I'm facing trouble while loading y.html after x.html. The y.html file is not working properly. Can Someone help me??</p>
  
  <p>This is my html code for Nav-pills and tab content:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      &lt;h2&gt;Array Operations&lt;/h2&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;Creation&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" id="Menu1" href="#menu1"&gt;Insertion&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" id="Menu2" href="#menu2"&gt;Deletion&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" id="Menu3" href="#menu3"&gt;Searching&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" id="Menu4" href="#menu4"&gt;Sorting&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;h3&gt;Create&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div id="menu1" class="tab-pane fade"&gt;
          &lt;h3&gt;Insert&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div id="menu2" class="tab-pane fade"&gt;
          &lt;h3&gt;Delete&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div id="menu3" class="tab-pane fade"&gt;
          &lt;h3&gt;Search&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div id="menu4" class="tab-pane fade"&gt;
          &lt;h3&gt;Sort&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my jquery to load html files on button click:</p>
  
  <pre><code> &lt;script&gt;
  $('a#Home').click(function() {
    $("#home").load("x.html");
  });
  $('a#Menu1').click(function() {
    $("#menu1").load("y.html");
  });
  $('a#Menu2').click(function() {
    $("#menu2").load("z.html");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my x.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  &lt;h2&gt;Creation&lt;/h2&gt;
  &lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#cpp"&gt;C++&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-toggle="tab" href="#java"&gt;Java&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-toggle="tab" href="#python"&gt;Python&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
  &lt;div id="cpp" class="tab-pane fade in active"&gt;
    &lt;h3&gt;HOME&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="java" class="tab-pane fade"&gt;
    &lt;h3&gt;Menu 1&lt;/h3&gt;
    &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="python" class="tab-pane fade"&gt;
    &lt;h3&gt;Menu 2&lt;/h3&gt;
    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my y.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  &lt;h2&gt;Insertion&lt;/h2&gt;
  &lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#cpp"&gt;C++&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-toggle="tab" href="#java"&gt;Java&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-toggle="tab" href="#python"&gt;Python&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
  &lt;div id="cpp" class="tab-pane fade in active"&gt;
    &lt;h3&gt;HOME&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="java" class="tab-pane fade"&gt;
    &lt;h3&gt;Menu 1&lt;/h3&gt;
    &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="python" class="tab-pane fade"&gt;
    &lt;h3&gt;Menu 2&lt;/h3&gt;
    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Anyone can try to execute this snipet code here:</p>
  
  <p><a href="https://plnkr.co/edit/qHFvGVonWgLYVE51dhaP?p=gitter" rel="nofollow noreferrer">https://plnkr.co/edit/qHFvGVonWgLYVE51dhaP?p=gitter</a></p>