页面重新加载后保持当前 Bootstrap 选项卡处于活动状态而不跳转到第一个选项卡
Keep current Bootstrap tab active after page reload without jumping to first one between
我在我的应用中使用 Bootstrap 药片:
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
<li><a href="#contacts" data-toggle="tab">Contacts</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
为了在页面重新加载后保持在同一个选项卡上,我使用了以下功能:
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).attr('href'));
});
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
问题是在页面重新加载后,第一个选项卡激活 1 秒,然后跳转到实际的活动选项卡。如果没有这个 'jumping' 我可以保留当前选项卡吗?
这一行:
$('[href="' + lastTab + '"]').tab('show');
必须在以下时间更改:
$('[data-target="' + lastTab + '"]').tab('show');
不能引用 href,只能引用 data-target。
同申请:localStorage.setItem.....
固定码(jsfiddle):
$(function() {
var lastTab = localStorage.getItem('lastTab');
$('.container, .tab-content').removeClass('hidden');
if (lastTab) {
$('[data-target="' + lastTab + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).data('target'));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container hidden">
<ul class="nav nav-pills">
<li><a data-target="#home" data-toggle="tab">Home</a></li>
<li><a data-target="#about" data-toggle="tab">About</a></li>
<li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
</ul>
</div>
<div class="tab-content hidden">
<div class="tab-pane" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
答案就像ABC一样简单。
我只需要从第一个 <li></li>
标签中删除 class="active":
<li><a data-target="#home" data-toggle="tab">Home</a></li>
我在我的应用中使用 Bootstrap 药片:
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
<li><a href="#contacts" data-toggle="tab">Contacts</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
为了在页面重新加载后保持在同一个选项卡上,我使用了以下功能:
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).attr('href'));
});
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
问题是在页面重新加载后,第一个选项卡激活 1 秒,然后跳转到实际的活动选项卡。如果没有这个 'jumping' 我可以保留当前选项卡吗?
这一行:
$('[href="' + lastTab + '"]').tab('show');
必须在以下时间更改:
$('[data-target="' + lastTab + '"]').tab('show');
不能引用 href,只能引用 data-target。
同申请:localStorage.setItem.....
固定码(jsfiddle):
$(function() {
var lastTab = localStorage.getItem('lastTab');
$('.container, .tab-content').removeClass('hidden');
if (lastTab) {
$('[data-target="' + lastTab + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).data('target'));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container hidden">
<ul class="nav nav-pills">
<li><a data-target="#home" data-toggle="tab">Home</a></li>
<li><a data-target="#about" data-toggle="tab">About</a></li>
<li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
</ul>
</div>
<div class="tab-content hidden">
<div class="tab-pane" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
答案就像ABC一样简单。
我只需要从第一个 <li></li>
标签中删除 class="active":
<li><a data-target="#home" data-toggle="tab">Home</a></li>