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

编程问答

ajax实现简单的点击左侧菜单，右侧加载不同网页

發布時間：2024/10/12 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax实现简单的点击左侧菜单，右侧加载不同网页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現：ajax實現點擊左側菜單，右側加載不同網頁（在整個頁面無刷新的情況下實現右側局部刷新，用到ajax注意需要在服務器環境下運行，從HBuilder自帶的服務器中打開瀏覽效果即可）

圖片.png

原理：ajax的局部刷新原理：通過.load()重新加載頁面中的某一部分，巧妙的借助data-*的自定義屬性來存儲數據，點擊的時候修改錨點，因為地址有變，所以刷新的時候仍然會保持當前的頁面內容而不是切換到第一個。

遇到ajax局部刷新的需求也有很多，有時候比較簡單，當內容較少，適合做成選項卡，如果網頁的左側有一個列表，點擊列表使右側的內容進行切換，如果右側的內容過多，不適合做選項卡，這時候用.load()局部刷新最好不過了，在項目中經常使用到流程管理后臺，便是左右結構布局，這個時候，簡單的demo示例如下

<!DOCTYPE html> <html lang="en"><head><title>ajax局部刷新</title><style>.userMenu {float: left;width: 200px;}#content {float: left;}</style><meta charset="utf-8"><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body><div class="userWrap"><ul class="userMenu"><li class="current" data-id="center">用戶中心</li><li data-id="account">賬戶信息</li><li data-id="trade">交易記錄</li><li data-id="info">消息中心</li></ul><div id="content"></div></div></body><script>$(function() {$(".userMenu").on("click", "li", function() {var sId = $(this).data("id"); //獲取data-id的值window.location.hash = sId; //設置錨點loadInner(sId);});function loadInner(sId) {var sId = window.location.hash;var pathn, i;switch(sId) {case "#center":pathn = "user_center.html";i = 0;break;　　　　　　　case "#account":pathn = "user_account.html";i = 1;break;case "#trade":pathn = "user_trade.html";i = 2;break;case "#info":pathn = "user_info.html";i = 3;break;　　　　　　default:pathn = "user_center.html";i = 0;break;}$("#content").load(pathn); //加載相對應的內容$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //當前列表高亮}var sId = window.location.hash;loadInner(sId);});</script></html>

創建右側對應的幾個新的html頁面user_center.html，user_account.html，user_trade.html，user_info.html

user_center.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><div>用戶中心用戶中心用戶中心</div></body> </html>

user_account.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><div>賬戶信息賬戶信息賬戶信息</div></body> </html>

user_trade.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><div>交易中心交易中心交易中心 </div></body> </html>

user_info.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><div>消息中心消息中心消息中心</div></body> </html>

90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知

轉載于:https://www.cnblogs.com/ting6/p/9725528.html

總結

以上是生活随笔為你收集整理的ajax实现简单的点击左侧菜单，右侧加载不同网页的全部內容，希望文章能夠幫你解決所遇到的問題。

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