当我单击浏览器后退按钮或移动设备后退按钮时，保留选定的选项卡
Posted
技术标签:
【中文标题】当我单击浏览器后退按钮或移动设备后退按钮时，保留选定的选项卡【英文标题】：Keep the selected tab when I click on browser back button or mobile device back button 【发布时间】：2016-01-18 08:06:20 【问题描述】：移动视图中标签的以下代码以及我的问题如果我单击所选标签中的任何链接并转到任何链接以及单击移动设备或浏览器中的后退按钮时如何保留所选标签返回所选标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function()
$('a.tab-menu').click(function()
if ( $(window).width() < 768 )
$('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
);
);
</script>
</head>
<body>
<h2 class="responsive-tab"><a href="#tab-1" class="tab-menu">tab 1</a></h2>
<div id="tab-1"> content here </div>
<h2 class="responsive-tab"><a href="#tab-2" class="tab-menu">tab 1</a></h2>
<div id="tab-2"> content here </div>
<h2 class="responsive-tab"><a href="#tab-3" class="tab-menu">tab 1</a></h2>
<div id="tab-3"> <a href="#">link here</a> </div>
</body>
</html>
【问题讨论】：
您想在用户按下返回按钮时保持标签打开？为什么？ 客户需求！ ***.com/questions/25806608/… 【参考方案1】：您可以使用localStorage 或sessionStorage
http://www.w3schools.com/html/html5_webstorage.asp
所以是这样的：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function()
if (localStorage.which_tab)
$('#tab-'+localStorage.which_tab).slideToggle("slow").siblings('div').hide('slow');
$('#tab-'+ localStorage.which_tab).slideToggle('slow');
$('a.tab-menu').click(function()
if ( $(window).width() < 768 )
$('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
var t = $(this).attr('data-type')
localStorage.which_tab = t
);
);
</script>
</head>
<body>
<h2 class="responsive-tab"><a href="#tab-1" data-type="1" class="tab-menu">tab 1</a></h2>
<div id="tab-1"> content here </div>
<h2 class="responsive-tab"><a href="#tab-2" data-type="2" class="tab-menu">tab 1</a></h2>
<div id="tab-2"> content here </div>
<h2 class="responsive-tab"><a href="#tab-3" data-type="3" class="tab-menu">tab 1</a></h2>
<div id="tab-3"> <a href="#">link here</a> </div>
</body>
</html>
您可以在 plnkr 中查看
http://plnkr.co/edit/6sVWrdfjnZyb9sDEog7V?p=preview
【讨论】：
以上是关于当我单击浏览器后退按钮或移动设备后退按钮时，保留选定的选项卡的主要内容，如果未能解决你的问题，请参考以下文章
点击浏览器后退按钮时如何刷新 ASP .NET MVC 页面