如何在 Bootstrap 重新加载页面时保持当前选项卡处于活动状态
答案：使用 HTML5 localStorage 对象
在 Bootstrap 中，如果您刷新页面，该选项卡将重置为默认设置。 但是，您可以使用 HTML5 localStorage 对象 在浏览器中本地保存当前选项卡的某些参数，然后将其取回以使页面重新加载时选择的最后一个活动选项卡。
让我们试试下面的例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
</head>
<body>
<div class="m-3">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#sectionA" class="nav-link active" data-toggle="tab">Section A</a>
</li>
<li class="nav-item">
<a href="#sectionB" class="nav-link" data-toggle="tab">Section B</a>
</li>
<li class="nav-item">
<a href="#sectionC" class="nav-link" data-toggle="tab">Section C</a>
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h3>Section A</h3>
<p>Aliquip placeat salvia cillum iphone...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>Nullam hendrerit justo non leo aliquet...</p>
</div>
</div>
</div>
</body>
</html>上面示例中的 jQuery 代码只是在使用 jQuery .attr() 方法显示新选项卡时获取 <a> 元素的 href 属性值，并通过 HTML5 localStorage 对象将其保存在用户浏览器本地。 稍后，当用户刷新页面时，它会检索此数据并通过 Bootstrap 的 .tab('show') 方法激活相关选项卡。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements