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

编程问答

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

发布时间：2025/7/25 编程问答 75 豆豆

生活随笔收集整理的这篇文章主要介绍了案例：使用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库实现顶部进度条的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。