我对我的代码有两个问题。
第一:我想在页面刷新后保持最后选择的选项卡处于活动状态。问题是当页面刷新时,第一个选项卡始终处于活动状态。
第二:当用户来到这个页面时,通过链接更改密码。在这个时候,我想使第二个(更改密码)选项卡活动。
下面是我的代码:
<ul class="tab">
<li class="current" data-tab="tab1">Account information</li>
<li data-tab="tab2">Change Password</li>
</ul>
<div class="tab-content current" id="tab1">
Tab1 Content comes Here!
</div>
<div class="tab-content" id="tab2">
Tab1 Content comes Here!
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('ul.tab li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tab li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
});
</script>
4条答案
按热度按时间p8h8hvxi1#
使用sessionStorage存储哪个选项卡是活动的,并将当前类应用于活动选项卡。页面刷新后,会话存储变量仍然存在。
bvuwiixz2#
这个可能会有帮助
gkn4icbw3#
您可以将其保存到localStorage:
下面是工作示例:https://jsfiddle.net/k5j9qv4k/2/
至于第二个问题,我假设你不在这个有标签的页面上。然后,您可以将
tab_id='tab2'
保存到localStorage:slmsl1lt4#
您可以使用本地存储。在标签页中写下下面的代码。