有啥方法可以通过 URL 激活 BootStrap 选项卡？ [复制]

Posted 2023-02-22

【中文标题】有啥方法可以通过 URL 激活 BootStrap 选项卡？ [复制]

【英文标题】：Any way to get BootStrap tabs to be activated via the URL? [duplicate]有什么方法可以通过 URL 激活 BootStrap 选项卡？ [复制]

【发布时间】：2014-07-28 08:51:03

【问题描述】：

我正在使用 BootStrap 的选项卡 (http://getbootstrap.com/javascript/#tabs)。有没有办法让您在访问 example.com/#8 时将您带到标记为 8 的选项卡？

当前代码：

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="MyTabs">
  <li><a href="#8" data-toggle="tab">8</a></li>
  <li><a href="#7" data-toggle="tab">7</a></li>
  <li><a href="#6" data-toggle="tab">6</a></li>
  <li><a href="#5" data-toggle="tab">5</a></li>
  <li><a href="#4" data-toggle="tab">4</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
...
</div>

我通常不使用 JS，因为我还没有学会它，但任何帮助都会很棒！

【问题讨论】：

@DavidMulder 对不起，如果它是重复的，我没有时间查找其他类似的（是的，我做了几分钟）

【参考方案1】：

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) 
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
 

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

来自：The Same Question on SO，但我建议您以后尝试自己的研究。我用来查找答案的示例搜索类似于this

【讨论】：

天啊！非常感谢！虽然谷歌搜索会起作用，但我发现这更好用，谢谢。