如何从外部链接或页面刷新后导航到特定的引导选项卡?
从外部链接或页面刷新导航 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中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

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

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

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

Dreamweaver CS6
视觉化网页开发工具

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

热门话题

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
