當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条

發布時間：2025/7/25 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了案例：使用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

轉載于:https://www.cnblogs.com/chuanzi/p/10516811.html

總結

以上是生活随笔為你收集整理的案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。