英文:
How to keep current tab active after page refresh and using hash in the url
问题
如何在刷新页面时保存当前活动的选项卡？并且是否可以通过URL访问它，例如#contact-tab-pane？
如果你想在刷新页面时保存当前活动的选项卡，你可以使用JavaScript来实现。你可以通过以下步骤来完成：
- 使用JavaScript获取当前活动的选项卡的ID。
- 使用
localStorage将选项卡的ID保存在本地存储中。 - 在页面加载时，检查本地存储中是否有保存的选项卡ID，并将其设置为活动选项卡。
以下是一个简单的示例代码：
// 获取当前活动选项卡的ID
var activeTabId = $('#myTab .nav-link.active').attr('id');
// 保存选项卡ID到本地存储
localStorage.setItem('activeTabId', activeTabId);
// 在页面加载时，检查本地存储并设置活动选项卡
$(document).ready(function() {
var savedTabId = localStorage.getItem('activeTabId');
if (savedTabId) {
$('#' + savedTabId).tab('show');
}
});
关于通过URL访问选项卡，你可以使用锚点（anchor）来实现。只需在URL中包含选项卡的ID，例如#contact-tab-pane，然后使用JavaScript来解析URL并激活相应的选项卡。
希望这能帮助你实现所需的功能。
英文:
I have the following snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact</div>
</div>
<!-- end snippet -->
How can I save the current active tab if I refresh the page? And is it possible to access it through the URL like #contact-tab-pane ?
答案1
得分: 1
在这里，我们需要使用 window.location.hash; 读取当前的URL哈希值。
然后，我们需要为 [data-bs-toggle="tab"] 创建一个 click 事件，使用 history.pushState(null, null, activeTabId); 将哈希值添加到当前的URL中。
尝试 JSfiddle
<script>
$(document).ready(function ($) {
var tabIdFromUrl = window.location.hash;
if (tabIdFromUrl) {
var activeTabBtn = $('[data-bs-target="' + tabIdFromUrl + '"]');
if (activeTabBtn) {
var tab = new bootstrap.Tab(activeTabBtn);
tab.show();
}
}
$(document).on('click', '[data-bs-toggle="tab"]', function (event) {
var activeTabId = $(this).attr('data-bs-target');
history.pushState(null, null, activeTabId);
});
});
</script>
英文:
Here we need to read current url hash value with window.location.hash;
And then we need to create click event for [data-bs-toggle="tab"] to push the hash value to the current url using history.pushState(null, null, activeTabId);
Try JSfiddle
<script>
$(document).ready(function ($) {
var tabIdFromUrl = window.location.hash;
if (tabIdFromUrl) {
var activeTabBtn = $('[data-bs-target="' + tabIdFromUrl + '"]');
if (activeTabBtn) {
var tab = new bootstrap.Tab(activeTabBtn);
tab.show();
}
}
$(document).on('click', '[data-bs-toggle="tab"]', function (event) {
var activeTabId = $(this).attr('data-bs-target');
history.pushState(null, null, activeTabId);
});
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论