Ajax实现点击导航栏只切换页面内容，导航栏不变

                   <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="https://cdn.bootcss.com/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实现点击导航栏只切换页面内容，导航栏不变相关推荐

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
html导航页面滚动,可通过导航视图精确滚动页面内容的js插件
谁陪你走过人生无常十几年前,我在安庆读书,常去一家宿松饭店,老板和老板娘均来自附近的宿松.宿松话很难懂,老板娘常和老板叽咕一番,再扭头用普通话招呼客人.她不仅语言切换十分利落,打扮.做.事也利落,常 ...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
背景:在对项目进行bug走查的时候,测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新,当时我真的懵了,vue项目了router还能在当前页面进行再次刷新!!!我怀着疑惑上网查询.咨询足足使用了 ...
C# 系统应用之使用Pancel控件同一窗体切换页面
该文章是项目"个人电脑历史记录清除软件"的系列文章.主要讲述如何使用Pancel控件实现类似于360安全卫士的点击图标窗体不变,但页面内容变换的功能及遇到的重叠Panel不能设置V ...
怎么把一个控件放到tab页面上去?_移动端页面内容切换
# 移动端页面内容切换上周做了一个和页面切换相关的需求,为了探寻在需求场景下最符合用户心理模型的交互方式,当时一共输出了有四五种方案.总结一下各种切换页面内容的方式的特点和他们适用的场景.## 一. ...

Ajax实现点击导航栏只切换页面内容，导航栏不变

Ajax实现点击导航栏只切换页面内容，导航栏不变相关推荐

最新文章

热门文章