首先下载bootstrap和nprogress两个库
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="../nprogress.css"> <script src="../nprogress.js"></script> </head> <body> <div class="container pt-4"> <h1>会员中心</h1> <hr> <div class="row"> <aside class="col-md-3"> <div class="list-group"> <a class="list-group-item list-group-item-action" href="index.html">我的资料</a> <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a> <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a> </div> </aside> <main id="main" class="col-md-9"> <h2>我的个人资料</h2> <hr> </main> </div> </div> <script src="../jquery.js"></script> <script> $(function ($) { $(document) .ajaxStart(function () { NProgress.start() }) .ajaxStop(function () { NProgress.done() }) // 有一个独立的作用域，顺便确保页面加载完成执行 $('.list-group-item').on('click', function () { var url = $(this).attr('href') $('#main').load(url + ' #main > *') return false }) }) </script> </body> </html>
cart.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> <link rel="stylesheet" href="bootstrap.css"> </head> <body> <div class="container pt-4"> <h1>会员中心</h1> <hr> <div class="row"> <aside class="col-md-3"> <div class="list-group"> <a class="list-group-item list-group-item-action" href="index.html">我的资料</a> <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a> <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a> </div > </aside> <main id="main" class="col-md-9"> <h2>我的购物车</h2> <hr> </main> </div> </div> </body> </html>
orders.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> <link rel="stylesheet" href="bootstrap.css"> </head> <body> <div class="container pt-4"> <h1>会员中心</h1> <hr> <div class="row"> <aside class="col-md-3"> <div class="list-group"> <a class="list-group-item list-group-item-action" href="index.html">我的资料</a> <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a> <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a> </div > </aside> <main id="main" class="col-md-9"> <h2>我的订单</h2> <hr> </main> </div> </div> </body> </html>