STEP1: Open any text editor such as Brackets or Notepad.
STEP2: Create two html files and save as any name .html or .htm (I have used two files as test2.html and music.html).
The code for test2.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(function() {
$("#SongListLink").click(function() {
$("#All_songlist")
.load("music.html");
});
});
});
</script>
</head>
<body>
<div id="top_Bar">
<a href="#" id="SongListLink">Show music file</a>
</div>
<div id="All_songlist"></div>
</body>
</html>
The code for music.html:
<html>
<head>
</head>
<body>
<h1>
this is my music html file..<br>
welcome to music mania..</h1>
</body>
</html>
Now save both the files and run the test2.html file alone, you can find the music.html shown in the second div.