<ul class="Menu"> <li class="current" data-id="111">导航1<span></span></li><li data-id="222">导航2<span></span></li> <li data-id="333">导航3<span></span></li> </ul><div id="content"></div>
<script src="/jquery/3.3.1/jquery.min.js"></script><script> $(function() {$(".Menu").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 "#111":pathn = "111.html";i = 0;break; case "#222":pathn = "222.html";i = 1;break;case "#333":pathn = "333.html";i = 2;break;default:pathn = "111.html";i = 0;break;}$("#content").load(pathn); //加载相对应的内容$(".Menu li").eq(i).addClass("current").siblings().removeClass("current");//当前列表高亮}var sId = window.location.hash;loadInner(sId);});</script>
111.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body>111111111111111111111111</body></html>
222.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body>22222222222222222222222222</body></html>
333.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body>33333333333333333333333333333</body></html>
如果觉得《Ajax实现点击导航栏只切换页面内容 导航栏不变》对你有帮助，请点赞、收藏，并留下你的观点哦！
