代碼布局結構分為 header left content
html代碼如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>popomeet</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/login.css" rel="stylesheet"> <link href="lunbotu/style.css" rel="stylesheet"> <link href="bootstrap/css/index.css" rel="stylesheet"> <link href="bootstrap/css/czsj.css" rel="stylesheet"> <link href="img/link.ico" rel="shortcut icon" /> <style type="text/css"> </style> </head> <body style="background:#F2F2F2; "> <div id="header"></div> <!-- content--> <div class="middleContent" > <!-- 左側--> <div class="left-first"> <!-- 左側導航部分--> <div id="leftpol"> </div> <!-- 宣傳圖--> <div class="xcimg"> <img src="img/gg.png" class="iopa" alt=""> </div> </div> <!-- 右側 展示內容部分--> <div id="content"> </div> </div> <!-- 版權位置--> <div class="copyright" > <p class="copyrightContent" >©popomeet保留所有權利</p> </div> </body> <script src="bootstrap/js/jquery-3.1.0.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script src="http://www.jq22.com/demo/pagination20160204/jquery.pagination.js"></script> <!--<script src="bootstrap/js/indexsy.js"></script>--> </html>
將三面的三個部分(header left footer)代碼加載過來 被加載的頁面 要放到id="content"下面
/* *加載變換內容，主要url參數為dom對象，並且該dom中的url放在href中， *調用方式如：<span onclick="javascript:load(this);" href="/backstage/website/test.html">測試</span> *注意：1.該dom對象最好不要用a標簽，因為點擊a標簽會進入href指定的頁面 * 2.要加載的內容要用 id="content" 標注，因為load中指明了加載頁面中指定的id為content下的內容 * 3.對應頁面的JavaScript寫在content下 */
<script> $("#header").load("header.html"); $("#leftpol").load("left.html"); $("#content").load("sidebar.html"); function load(url, data){ alert($(url).attr("href")); $.ajaxSetup({cache: false }); $("#content").load($(url).attr("href")+ " #content ", data, function(result){ alert(result); //將被加載頁的JavaScript加載到本頁執行 $result = $(result); $result.find("script").appendTo('#content'); }); } </script>
<!-- 被加載頁面的代碼--> <div id="content" style="width:76%;height:1000px;float:left;margin-left:2%;background-color:#FFFFFF;border-radius:3px;"> <link href=" http://yanshi.sucaihuo.com/jquery/29/2986/demo/css/style.css" rel="stylesheet"> <div style="width:100%;height:1000px;"> <img src="img/game-1.png" style="width:36%;height:270px;margin-left:30%;margin-top:100px;" alt=""> <div class="loader loader-10" style="position: absolute;margin-top:410px;margin-left:-9%"></div> </div> </div>