日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

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

發(fā)布時間：2025/7/25 67 豆豆
生活随笔 收集整理的這篇文章主要介紹了 案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

首先下載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()})// 有一個獨立的作用域，順便確保頁面加載完成執(zhí)行 $('.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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/chuanzi/p/10516811.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。