如何在使用jquery刷新页面后保持当前选项卡处于活动状态

Question

嗨，我想在页面重新加载刷新后保持当前选项卡的活动状态，但不幸的是，它不起作用。这是我的错误。有人知道吗，请帮助我，谢谢。

HTML视图

<!-- Tabs navs -->
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab"
aria-controls="ex1-tabs-1" aria-selected="true">Slots</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link " id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab"
aria-controls="ex1-tabs-2" aria-selected="false">Booking List</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab"
aria-controls="ex1-tabs-3" aria-selected="false">Rooms</a>
</li>
</ul>
<!-- Tabs navs -->

<div class="tab-pane fade" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab one
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
Tab Two
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
Tab Three
</div>

脚本

$(document).ready(function(){
$('a[data-mdb-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});

var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#ex1 a[href="' + activeTab + '"]').tab('show');
}
});

Answer 1

以下是工作代码片段：

$(document).ready(function () {
$('.tab-link').on('click', function (e) {
localStorage.setItem('activeTab', $(this).attr('href'));
$(this).tab('show');
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('#ex1 a[href="' + activeTab + '"]').tab('show');
}
});

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>

<!-- Tabs navs -->
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link tab-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab" aria-controls="ex1-tabs-1" aria-selected="true">Slots</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link tab-link" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2" aria-selected="false">Booking List</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link tab-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab" aria-controls="ex1-tabs-3" aria-selected="false">Rooms</a>
</li>
</ul>
<!-- Tabs navs -->

<div class="tab-pane fade" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab one
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
Tab Two
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
Tab Three
</div>

注意：本地存储在Stackoverflow上被禁用，因此请在本地环境中执行此代码段。