tab页返回上一页不刷新

最新推荐文章于 2024-08-08 17:04:18 发布

小糖子先森

最新推荐文章于 2024-08-08 17:04:18 发布

阅读量1.4k

点赞数 1

分类专栏： html 文章标签： html tab返回

本文链接：https://blog.csdn.net/tang242424/article/details/84000846

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天写了一个tab页面当点击第二屏中菜单然后返回就会刷新显示第一屏体验效果很差。如下图
在这里插入图片描述

查了一些方法如下：

方法1:做成单页面，通过url hash或history.pushState来保持当前页面的状态，监听popstate事件
方法2:在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值

写了个小例子代码以及描述如下：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>返回tab演示</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style type="text/css">
			html,body{
				height: 100%;
			}
			body{
				padding: 0;
				margin: 0;
			}
			.tabs{
				width: 100%;
				height:100%;
				text-align: center;
				font-size: 28px;
				font-weight: 700;
				color: #fff;
				display: none;
			}
			.tabs:first-child{
				background: pink;
			}
			.tabs:nth-child(2){
				background: green;
			}
			.show{
				display: block;
			}
			.btn{
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50px;
				background: #fff;
				display: flex;
				border-top:1px solid #fefefe;
			}
			.btn>a{
				flex:1;
				text-align: center;
				line-height: 50px;
				color:#333;
				text-decoration: none;
			}
			.btn>a.active{
				background: rgb(47, 203, 154);
				color:#fff;
			}
		</style>
	</head>
	<body>
		<div class="tabs show" data-tab="1">第一屏
			<a href="https:www.qq.com">腾讯</a>
		</div>
		<div class="tabs" data-tab="2">第二屏
			<a href="https:www.baidu.com">百度</a>
		</div>
		<div class="btn">
			<a class="active" href="javascript:void(0);" data-tab="1">首页</a>
			<a href="javascript:void(0);" data-tab="2">我的</a>
		</div>
		<script type="text/javascript">
		$(function(){
		var hashTab = '';//存储最后tab属性值
		     $('.btn').on('click','a',function(){
			var dataTab = $(this).attr('data-tab');//存储当前点击按钮的自定义属性值
			$('.btn').children('a').removeClass('active');//去掉所有按钮选中样式
			$(this).addClass('active');//给当前点击按钮添加选中样式
			$('.tabs').removeClass('show')//去掉所有的显示屏
			$('div[data-tab='+ dataTab +']').addClass('show')//当前元素属性为点击按钮时获取到的属性值一样的区域显示
			history.replaceState({selectedTab:dataTab},"","#tab="+dataTab);
		     })
		if(location.hash){//判断是否存在哈希值
		    hashTab=location.hash.substr(-1); //如果有哈希值将取值其赋值变量'#tab=1' 取1赋值到变量
		    $('.btn').children('a').removeClass('active');//去掉所有按钮选中样式
		    $('.btn>a[data-tab='+ hashTab +']').addClass('active');//给当前点击按钮添加选中样式
		    $('.tabs').removeClass('show')//去掉所有的显示屏
		    $('div[data-tab='+ hashTab +']').addClass('show')//当前元素属性为点击按钮时获取到的属性值一样的区域显示
		   }
		})
		</script>
	</body>
</html>

当然，ios系统是会自动记住上一次记录的，主要是安卓系统。
解决后效果，如图
在这里插入图片描述
方法详情?https://developer.mozilla.org/zh-CN/docs/Web/API/History_API?