前端页面无刷新方案一

在开发过程中，为了避免每个页面要做头部底部，就想怎么实现页面无刷新，局部实现效果更换方案

第一联想到了ajax读取页面没然后页面局部替换，在页面上准备几个div。这里就简单粗暴的分成3个部分，（直接贴代码）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>无刷新方案 一</title>
     <link rel="stylesheet" href="http://css.baojia.com/s4/c/css/reset.css">
     <style type="text/css">
     body{width: 80%;margin: 0 auto}
         ul { margin: 0 auto; overflow: none}
         /*ul li {float: left; background: #ccc;padding: 15px 20px;}*/
        ul li {display: inline-table; background: #ccc;padding: 15px 20px;  }
        ul li:nth-of-type(1){ margin-left: 0px }
        /*ul li {display: inline-table; background: #ccc;padding: 15px 20px;}*/
        ul li a{color: #f0f0f0;}
        #pageHeader{background-color: green}
        #pageMain{width: 900px; margin: 0 auto; margin-top: 200px}
        #pageFooter{background-color: red}
     </style>
</head>

<body>

    <div id="pageHeader">
    </div>
    <div id="pageMain"></div>
    <div id="pageFooter"></div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="../js/core.pss.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</html>

View Code