Loading the Navigation Tab contents on the home page
<p>I have a few navigation tabs on my home page of my application. One of the tabs has the dropdowns. When any tab is clicked, I want the content to load on the same page in between the header and the footer. All the files are internal files. How can I achieve that, preferably using AJAX JQuery? Also I would like to select the particular tab whose content is loaded. My code snippets:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  $(".dropdown").mouseenter(function() {
    $("#myDropdown").show();
  });

  $("#myDropdown, .dropdown").mouseleave(function() {
    $("#myDropdown").hide();
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* This is the stylesheet of the main page index.html. */

#header {
  display: block;
  width: 100%;
  height: 10em;
  margin: 1px 20px 2px 1px;
  border-bottom: 3px red solid;
  background: url("images/body-bg.jpg") -20px repeat-y, url("images/gold.gif") 220px 10px no-repeat, url("images/back.png") 320px 10px no-repeat, url("images/AR.png") 480px 10px no-repeat, url("images/black-horizntal.png");
  background-size: auto, 100px, 150px, 120px, auto;
}
#title {
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: "Arial", Georgia, serif;
  font-size: medium;
  padding-top: 46px;
}
#tabs {
  float: left;
  width: 100%;
  background: none;
  /* border-bottom:4px solid #000; */
  overflow: hidden;
  position: fixed;
}
#tabs ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}
#tabs ul li {
  display: block;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
  border: 0.06em solid darkgray;
  font-size: large;
}
#tabs ul li a {
  display: block;
  margin: 0 0 0 1px;
  padding: 3px 10px;
  background: #ddd;
  color: #000;
  text-decoration: none;
  line-height: 1.3em;
}
#tabs ul li a:hover {
  background: #369;
  color: #fff;
}
#tabs ul li a.active,
#tabs ul li a.active:hover {
  color: #fff;
  background: #000;
  font-weight: bold;
}
footer #footer {
  position: absolute;
  border-top: solid 3px red;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 60px;
}
/* CSS for dropdowns of the "Matrix" tab */

#myDropdown {
  display: none;
}
body {
  overflow: auto;
  height: auto;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta charset="utf-8" http-equiv="content-type" content="text/html"&gt;

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;header&gt;
    &lt;div id="header"&gt;
      &lt;div id="tabs"&gt;

        &lt;ul class="list-inline" id="nav"&gt;
          &lt;li&gt;&lt;a href="maps/map1.html"&gt;Area&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="maps/map2.html"&gt;Facility&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="#"&gt;Matrix&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;div class="dropdown-content" id="myDropdown"&gt;
              &lt;a href="table1.html"&gt;Table1&lt;/a&gt;
              &lt;a href="table2.html"&gt;Table2&lt;/a&gt;

            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
</div>
</div>
</p>