如何从外部链接或页面刷新后导航到特定的引导选项卡?
从外部链接或页面刷新导航 Twitter Bootstrap 选项卡
将 Twitter 的 Bootstrap 选项卡合并到网页中时,从外部链接或页面重新加载时直接导航到特定选项卡可能具有挑战性。本文深入探讨了解决方案,使您能够在选项卡之间无缝切换。
问题背景
假设您有一个名为facility.php 的页面,它使用 Bootstrap Tabs,并且您想要导航到特定选项卡从外部页面。例如,单击以下链接:
<a href="facility.php#home">Home</a> <a href="facility.php#notes">Notes</a>
登录后复制
应分别转到“主页”和“注释”选项卡。但是,从外部页面直接导航时,此转换无法发生。
解决方案
为了解决此问题,我们使用以下 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; })
登录后复制
让我们检查解决方案的每个部分:
- 获取当前值Tab: 代码的第一部分 (hash = location.hash.replace(/^#/, '')) 从 URL 中检索当前选项卡的片段标识符(#home 或 #notes)。
- 激活所需的选项卡:然后我们使用 .nav-tabs a[href="hash"] 选择与片段对应的选项卡元素标识符。最后,我们使用 .tab('show') 来激活选定的选项卡。
- 在页面重新加载时更新 URL: 代码的第二部分 (window.location.hash = e .target.hash)更新 URL 的片段标识符以在刷新页面时匹配激活的选项卡。这可以确保即使在页面重新加载后也保留当前选项卡。
通过此解决方案,您现在可以方便地从外部链接或页面刷新时直接导航到特定的 Bootstrap 选项卡,从而增强用户体验。
以上是如何从外部链接或页面刷新后导航到特定的引导选项卡?的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前
By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保护它?
3 周前
By DDD

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)