javascript - 单击链接时显示页面的隐藏内容

Question

我已经创建了固定的页眉和页脚。当用户单击页脚或页眉中的链接时，应显示该页面的内容。

在这里我得到了各种样式但无法使用它:Page dispaly styles

这是我的演示链接:Codepan demp

这是带有 4 个链接的页脚代码:

<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>

此页脚和页眉应保持固定。当用户单击该页面的链接内容时，页面应该不会加载。

现在考虑每个可点击链接页面上的空白。

Answer 1

嘿哥们你可以这样试试

JS 代码:

$('.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
  }
   });

});

服务器脚本可以是 aspx、php 或任何你觉得容易使用的东西。

快乐编码:)