gpt4 book ai didi

javascript - 当我单击浏览器后退按钮或移动设备后退按钮时,保留所选选项卡

转载 作者:行者123 更新时间:2023-11-28 06:48:02 25 4
gpt4 key购买 nike

以下移动 View 中选项卡的代码以及我的问题,如果我单击所选选项卡中的任何链接并转到任何链接,以及当我单击移动设备或浏览器后退按钮中的后退按钮时,如何保留所选选项卡返回所选选项卡

 <!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>

最佳答案

您可以使用localStoragesessionStorage

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

关于javascript - 当我单击浏览器后退按钮或移动设备后退按钮时,保留所选选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33223524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com