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">
<style>
.loading {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
font-size: 30px;
}
</style>
<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>
<div class="loading">正在玩命加载中...</div>
<script src="../jquery.js"></script>
<script>
//入口函数后面要传参$,防止$()方法沿着作用域往上找
$(function($){
$('.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>