前言

先来介绍一下history.pushState()和window.onpopstate

history.pushState()，改变当前地址栏的路径，并不会更新页面内容

用法：history.pushState(Object, title, url);

第一个参数：是一个对象，通过pushState方法可以将该对象内容传递到新页面中。
第二个参数，指标题，几乎没有浏览器支持该参数，传一个空字符串比较安全。
第三个参数，是新的路径地址，不指定的话则为当前的路径。

window.onpopstate，该事件可以监听，点击浏览器的前进按钮/后退按钮

调用history.pushState()或history.replaceState()不会触发popstate事件。该popstate事件仅通过执行浏览器操作触发，如单击“后退”按钮（或JavaScript中调用history.back()），在同一文档的两个历史记录项之间进行导航。

window.addEventListener('popstate', function (e) {});

history.pushState()案例：

来看一下我们要实现的tab切换的最终效果：
当点击水果、蔬菜、零食、饮料菜单时，下方会出现对应的内容

布局代码：

<ul id="menu"><li>水果</li><li>蔬菜</li><li>零食</li><li>饮料</li>
</ul>
<ul id="list1"><li>猕猴桃</li><li>苹果</li><li>梨</li>
</ul>
<ul id="list2"><li>白菜</li><li>土豆</li><li>地瓜</li>
</ul>
<ul id="list3"><li>辣条</li><li>牛肉干</li><li>薯片</li>
</ul>
<ul id="list4"><li>可乐</li><li>雪碧</li><li>果汁</li>
</ul>

样式代码：

#menu {list-style: none;margin: 0;padding: 0;position: relative;height: 200px;
}#menu>li {float: left;margin-left: 20px;padding: 10px 30px;border: 1px solid #000000;
}ul:not(#menu) {position: absolute;display: none;
}

js代码：

var menu = document.getElementById("menu");
//将获取到的htmlCollection列表转成数组
var lis = Array.from(menu.getElementsByTagName("li"));
var uls = Array.from(document.getElementsByTagName("ul")).slice(1);
//监听浏览器的前进、回退按钮
window.onpopstate = function () {changeList();
}
//给上面每个li添加点击事件
for (var i = 0; i < lis.length; i++) {lis[i].onclick = clickHandler
}function clickHandler() {var index = lis.indexOf(this);//将id数据传到新的页面，同时给当前的链接添加锚点标记history.pushState({ id: "list" + (index + 1) }, "", "#list" + (index + 1));changeList();
}function changeList() {for (var i = 0; i < uls.length; i++) {//如果ul列表的id等于history中传过来的数据，则让对应的ul显示，否则让它隐藏if (uls[i].id === history.state.id) {uls[i].style.display = "block";} else {uls[i].style.display = "none";}}
}

这个案例中，给当前浏览器的路径添加锚点，只是为了更清楚地看到页面路径的改变，如果不修改当前的页面路径，也不会影响tab功能的实现。

history`pushState和window`onpopstate实现tab切换效果相关推荐

Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
js第三章简答题5(制作如图所示的Tab切换效果)
ps:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
vue使用动态组件实现TAB切换效果
目录一.方法1:使用Vant组件库的tab组件二. 方法2:手动创建tab切换效果 2.在components文件夹下创建切换的.vue页面.引入使用 3.布局:上面放tab点击的标签,下面放组件 ...
html 天猫上拉切换,jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单 ...
操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.历史记录前进与后退 1.后退: window.history.back() -- 相当于用户在浏 ...
window.history.pushState()和window.history.replaceState()
今天在项目中遇到要实现修改地址栏但是页面不可以刷新的需求查阅资料发现可以用window.history.pushState(state, title, url)和window.history.re ...

history`pushState和window`onpopstate实现tab切换效果

前言

history.pushState()，改变当前地址栏的路径，并不会更新页面内容

window.onpopstate，该事件可以监听，点击浏览器的前进按钮/后退按钮

history.pushState()案例：

history`pushState和window`onpopstate实现tab切换效果相关推荐

最新文章

热门文章