tab切换返回到跳转前得tab选项卡处

返回上一页的时候自动定位到跳转前得tab选项处

在自适应页面通过iframe方法嵌入到其他应用中时,如果页面中存在tab切换,同时使用target=”_self”时,要想使target执行后再返回到指定得tab高亮处,需要利用history.back()到指定锚点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="tab">
<li class="active">首页</li>
<li>栏目页</li>
</ul>
<div class="tab_con">
<div class="tab_item"></div>
<div class="tab_item"></div>
</div>
<script>
$(function () {
//获取#后的参数
var active_tab = window.location.hash
var tablist = $('.tab li')
$.each(tablist, function () {
var tab_index = $(this).index()
if (active_tab.indexOf(tab_index) > -1) {
$(this).addClass('active').siblings().removeClass('active');
$('.tab_con .tab_item').eq(tab_index).show().siblings().hide();
}
})
$('.tab li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
$('.tab_con .tab_item').eq(index).show().siblings().hide();
//添加锚点
// 给tab栏绑定点击事件,点击事件处理两件事:显示需要显示的内容,如果tab的index和url中的index信息不同,那么push进入一条新的历史记录。
var page_idx = + (window.location.hash && window.location.hash.substr(-1));
var idx = $(this).index();
if (page_idx !== idx) {
window.history.pushState(null, null, '#tab=' + idx);
}
});
})
</script>

tab切换返回到跳转前得tab选项卡处
https://huangzunxue998.top/2023/04/19/tab切换返回到跳转前得tab选项卡处/
Author
黄dada
Posted on
April 19, 2023
Licensed under