案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条
生活随笔
收集整理的這篇文章主要介紹了
案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先下載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>?
轉載于:https://www.cnblogs.com/chuanzi/p/10516811.html
總結
以上是生活随笔為你收集整理的案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件工程-第一次作业
- 下一篇： 线段树区间合并