首页 >web前端 >js教程 >如何使用外部链接定位特定的引导选项卡并在重新加载时保留选择?

如何使用外部链接定位特定的引导选项卡并在重新加载时保留选择?

Barbara Streisand
Barbara Streisand原创
2024-12-03 03:59:11975浏览

How Can I Target Specific Bootstrap Tabs Using External Links and Preserve the Selection on Reload?

使用外部链接定位特定 Bootstrap 选项卡

查询:

单击时如何导航到特定 Bootstrap 选项卡在外部链接上,确保所需的选项卡在页面上保持活动状态重新加载?

答案:

要实现此功能,请实现以下 JavaScript 代码:

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

说明:

  1. 找到hash: 从当前 URL 检索哈希(“#”后面的部分)。
  2. 激活选项卡: 搜索与哈希匹配的选项卡链接并将其切换到show.
  3. 在重新加载时保留哈希:显示选项卡时更新 URL 哈希以保持其活动状态页面重新加载时。

以上是如何使用外部链接定位特定的引导选项卡并在重新加载时保留选择?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn