Add header html file with javascript -

thi javascript code show html file inside index.html

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script>  $(function(){ $("#header").load("header.html");  $("#footer").load("footer.html");  }); </script>   <div id="header"></div> <!--remaining section--> <div id="footer"></div> 

but how make when click example header show content of header.html or if click footer show footer.html

       <li><a href="header.html"><span>header</span></a></li>         <li><a href="footer.html"><span>footer</span></a></li> 

here's example:

html

<ul id="nav">     <li>         <a href="header.html" data-container="header">             <span>header</span>         </a>     </li>     <li>         <a href="footer.html" data-container="footer">             <span>footer</span>         </a>     </li> </ul> <div id="header"></div> <!--remaining section--> <div id="footer"></div> 

javascript

$(document).ready(function() {     $('ul#nav li a').on('click', function() {         var el = $(this);         $('#' + el.data('container')).load(el.attr('href'));         return false;     });     });