Display hidden content of page when link is clicked

Question

I have created fixed header and footer. When user clicks on the link in footer or header, content of that page should appear.

Here I got various styles but could not make use of it : Page dispaly styles

Here is the link of my demo: Codepan demp

Here is code of footer with 4 links:

<ul class="nav navbar-nav">     
    <li class="active"><a href="#">What is Facebook?</a></li>
    <li><a href="#about">How does it work?</a></li>
    <li><a href="#contact">Feedback</a></li>
    <li><a href="#contact">Contact us</a></li>                            
</ul>

This footer and header should remain fixed. When user click on the link content of that page should appear without page load.

For now consider black space on page of each clickable link.

Answer 1

hey buddy you can try like this

JS CODE:

$('.nav navbar-nav li a').on('click',function(){
   var pageName=$(this).html();
   $.ajax({
     url: "target.php", // the page were the target page is generated based on the input data
     data: {page:pageName}, //pagename to be displayed
 success:function (data){
    $('#Result').html (data); //add the data returned for footer option
  }
   });

});

the server script can be aspx, php or anything which u feel easy working with.

Happy Coding :)