jquery ajax load a html file into a div element - html

Question

I try to load using jQuery and Ajax a div located in another file. I can load the hole file, I can load the div with text inside it, but I want 3 divs to the respective navbar, what should I do???
HTML :
<div class="container">
<ul class="tab-navigation">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Liên hệ</li>
</ul>
</div>
<div id="main-content"></div>
files html i need into :
<div id="home" class="tab-content">
<p><b>Home</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, deleniti aliquid? Rerum excepturi quod cupiditate quam magnam necessitatibus dignissimos culpa ab ex nesciunt repellat, perspiciatis iure cum tempora vero perferendis?</p>
</div>
<div id="contact" class="tab-content">
<p><b>Contact</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, deleniti aliquid? Rerum excepturi quod cupiditate quam magnam necessitatibus dignissimos culpa ab ex nesciunt repellat, perspiciatis iure cum tempora vero perferendis?</p>
</div>
<div id="about" class="tab-content">
<p><b>About</b> Lorem ipsum dolor sit ?</p>
</div>
JS
$(document).ready(function(){
$(".tab-navigation li").click(function(){
var index = $(this).index(); // thứ tự tab
console.log(index);
$(this).siblings().removeClass("active");
$(this).addClass("active");
/* ================= Load url ================= */
$(".tab-navigation li").each(function(){
if(index == 0){
$("#main-content").load('files/home.html');
}
if(index == 1){
$("#main-content").load('files/about.html');
}
if(index == 2){
$("#main-content").load('files/contact.html');
}
})
})
})